Mengapa Font TrueType Tersuai Saya (.ttf) Tidak Berfungsi dalam CSS?

Menggunakan Fon Tersuai dengan CSS: Panduan Komprehensif

Menggayakan halaman web dengan fon unik boleh meningkatkan pengalaman pengguna dan menambah sentuhan personaliti . Walau bagaimanapun, menggabungkan fon tersuai memberikan cabarannya sendiri. Satu isu biasa dihadapi apabila menggunakan fail TrueType Font (.ttf) dalam CSS.

Masalah:

Seorang pengguna telah memasukkan fail .ttf dalam kod CSS mereka , tetapi perubahan fon yang diingini tidak digunakan pada halaman. Kod tersebut kelihatan seperti ini:

<code class="css">@font-face {
    font-family: 'oswald';
    src: url('/font/oswald.regular.ttf');
}</code>

Analisis:

Untuk penyemak imbas memaparkan fon tersuai, adalah penting untuk menyediakannya dengan berbilang format fail yang disokong secara meluas . Bergantung sepenuhnya pada fail .ttf mungkin tidak mencukupi untuk keserasian merentas penyemak imbas.

Penyelesaian:

Untuk memastikan sokongan fon yang optimum, amalan terbaik ialah menggunakan gabungan daripada format fon:

<code class="css">@font-face {
    font-family: 'MyWebFont';
    src: url('webfont.eot'); /* IE9 Compat Modes */
    src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('webfont.woff') format('woff'), /* Modern Browsers */
         url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
         url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}</code>

Pendekatan komprehensif ini menyediakan sokongan untuk pelbagai pelayar lama dan moden. Untuk menyelaraskan proses, pengguna boleh menggunakan penjana fon web seperti Font Squirrel atau Transfonter.

Pelayar moden, seperti Chrome 6 , Firefox 3.6 dan IE 9 , mengutamakan format fon .woff. Oleh itu, penyelesaian yang lebih ringkas untuk penyemak imbas ini mungkin:

<code class="css">@font-face {
    font-family: 'MyWebFont';
    src: url('myfont.woff') format('woff'), /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
         url('myfont.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5, Opera 10+, Safari 3—5 */
}  </code>

Sumber Tambahan:

• Helah CSS: https://css-tricks. com/snippets/css/using-font-face/
• Bolehkah Saya Gunakan: https://caniuse.com/?search=fontface

Atas ialah kandungan terperinci Mengapa Font TrueType Tersuai Saya (.ttf) Tidak Berfungsi dalam CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!