Mengapa Fon .ttf Saya Tidak Dipaparkan dengan Betul dalam Tapak Web Saya?

Menggabungkan Fon .ttf melalui CSS

Isu:

Dalam percubaan untuk melaksanakan fon global untuk halaman web, fail .ttf telah disertakan dalam CSS. Walau bagaimanapun, fon gagal dipaparkan seperti yang dimaksudkan.

Snippet Kod:

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

html, body, div, span, ... {
    font-family: oswald;
}</code>

Punca Punca:

Dalam pelaksanaan fon web, semata-mata menyediakan fail .ttf tidak mencukupi untuk keserasian merentas penyemak imbas.

Penyelesaian:

Untuk menyokong keserasian merentas penyemak imbas yang berbeza, gabungan berbilang fon format disyorkan:

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

Pendekatan Alternatif:

Untuk sokongan penyemak imbas yang lebih baik, penyemak imbas moden mengesyorkan memilih format fon .woff:

<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: Menggunakan @font-face: https://css-tricks.com/snippets/css/using-font-face/
• Bolehkah saya Gunakan fontface: https://caniuse.com/?feat=fontface

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