Mengapa Fon .ttf Saya Tidak Dipaparkan dalam Halaman Web Saya?

Termasuk Fon .ttf Menggunakan CSS

Apabila cuba untuk memasukkan fon global untuk halaman web menggunakan fail .ttf, anda boleh menghadapi masalah jika fon anda tidak berubah. Mari kita selesaikan masalah yang mungkin berlaku:

Menyelesaikan masalah Kod

Kod yang disediakan tidak mempunyai elemen kritikal untuk keserasian merentas penyemak imbas. Selain fail .ttf, anda perlu menyediakan format alternatif untuk penyemak imbas yang berbeza:

<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>

Alat Automasi

Untuk memudahkan proses penjanaan berbilang fon ini format, anda boleh menggunakan alatan seperti Font Squirrel atau Transfonter.

Sokongan Penyemak Imbas Moden

Untuk penyemak imbas moden, anda boleh memilih pendekatan yang lebih ringkas:

<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

• https://css-tricks.com/snippets/css/using-font-face/
• https: //caniuse.com/#feat=fontface (untuk maklumat sokongan penyemak imbas)

Atas ialah kandungan terperinci Mengapa Fon .ttf Saya Tidak Dipaparkan dalam Halaman Web Saya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!