Bagaimana Saya Membenamkan Font .otf pada Penyemak Imbas Web untuk Keserasian Maksimum?

Membenamkan Fon .otf pada Penyemak Imbas Web

Walaupun fon .otf menyediakan tipografi berkualiti tinggi, membenamkannya pada penyemak imbas web boleh menjadi rumit. Berikut ialah pendekatan dan alternatif yang mungkin:

Benamkan Fon .otf

Pelayar moden menyokong fon .otf menggunakan peraturan @font-face:

<code class="css">@font-face {
    font-family: GraublauWeb;
    src: url("path/GraublauWeb.otf") format("opentype");
}</code>

Walau bagaimanapun, tidak semua penyemak imbas menyokong .otf secara asli. Untuk keserasian penyemak imbas yang luas, pertimbangkan untuk menggunakan jenis fon alternatif.

Alternatif kepada .otf

• WOFF (Format Font Terbuka Web): Disokong oleh semua penyemak imbas desktop utama.
• TTF (TrueType Font): Fallback untuk penyemak imbas Safari, Android dan iOS yang lebih lama.

Menggunakan jenis ini meningkatkan penyemak imbas keserasian:

<code class="css">@font-face {
    font-family: GraublauWeb;
    src: url("path/GraublauWebBold.woff") format("woff"), url("path/GraublauWebBold.ttf") format("truetype");
}</code>

Untuk Sokongan Penyemak Imbas Near-Universal

Untuk sokongan penyemak imbas maksimum, pertimbangkan untuk memasukkan jenis fon tambahan:

<code class="css">@font-face {
    font-family: GraublauWeb;
    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>

Untuk maklumat sokongan penyemak imbas yang lebih terperinci, rujuk sumber:

• [@font-face Sokongan Penyemak Imbas](https://developer.mozilla.org/en-US/docs/Web/CSS/@ font-face/Syntax)
• [Sokongan Penyemak Imbas EOT](https://caniuse.com/eot)
• [Sokongan Penyemak Imbas WOFF](https://caniuse.com/woff)
• [Sokongan Penyemak Imbas TTF](https://caniuse.com/ttf)
• [Sokongan Penyemak Imbas SVG-Fonts](https://caniuse.com/svg-fonts)

Atas ialah kandungan terperinci Bagaimana Saya Membenamkan Font .otf pada Penyemak Imbas Web untuk Keserasian Maksimum?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!