Bagaimana Saya Melaksanakan Fon .OTF untuk Penyemak Imbas Web dan Memastikan Keserasian Merentas Pelayar?

Melaksanakan Fon .OTF untuk Penyemak Imbas Web

Untuk membenamkan dan menggunakan fon .OTF dalam penyemak imbas web, anda boleh menggunakan peraturan @font-face. Berikut ialah contoh:

@font-face {
    font-family: GraublauWeb;
    src: url("path/GraublauWeb.otf") format("opentype");
}

Nota: Fon OTF kini disokong dalam kebanyakan penyemak imbas utama.

Alternatif untuk Sokongan Penyemak Imbas Lebih Luas

Untuk keserasian penyemak imbas yang lebih universal, pertimbangkan untuk menggunakan fon Web Open Font Format (WOFF) dan TrueType Font (TTF).

Menggunakan Fon WOFF dan TTF

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

Sokongan Fon Komprehensif untuk Penyemak Imbas Warisan

Untuk menyokong penyemak imbas seperti IE6-9, Android 2.3-4.3 dan iOS 4-5, tambahkan jenis fon tambahan:

@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 */
}

Rujuk sumber berikut untuk mendapatkan maklumat lanjut tentang sokongan penyemak imbas untuk pelbagai format fon:

• @font-face Sokongan Pelayar
• Sokongan Pelayar EOT
• Sokongan Pelayar WOFF
• Sokongan Pelayar TTF
• Sokongan Penyemak Imbas SVG-Fonts

Atas ialah kandungan terperinci Bagaimana Saya Melaksanakan Fon .OTF untuk Penyemak Imbas Web dan Memastikan Keserasian Merentas Pelayar?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!