Mengapa @font-face Saya Tidak Berfungsi dalam Firefox, Tetapi Berfungsi dalam Chrome dan IE?

Mengapa CSS @font-face Berfungsi dalam Chrome dan IE tetapi Bukan Firefox

Peraturan CSS @font-face membenarkan anda menambah fon tersuai pada tapak web anda. Walau bagaimanapun, dalam kes ini, peraturan itu berfungsi dengan sempurna dalam Chrome dan Internet Explorer tetapi tidak dalam Firefox.

Isu Sistem Fail Setempat

Firefox menguatkuasakan "asal uri fail" yang ketat (fail:/ //) dasar secara lalai. Jika anda menjalankan tapak anda secara setempat menggunakan protokol fail:///, Firefox tidak akan membenarkan akses fon merentas domain.

Untuk menyelesaikan isu ini, muatkan tapak anda menggunakan protokol http:// atau lumpuhkan mengikuti keutamaan Firefox:

security.fileuri.strict_origin_policy

Diterbitkan Merentas Domain Isu

Jika anda menghadapi masalah ini selepas menggunakan tapak anda, ada kemungkinan penyemak imbas anda mentafsir laluan fon relatif sebagai permintaan merentas domain. Untuk mengelakkan ini, tambahkan pengepala berikut pada fail .htaccess anda:

<FilesMatch "\.(ttf|otf|eot)$">
    <IfModule mod_headers.c>
        Header set Access-Control-Allow-Origin "*"
    </IfModule>
</FilesMatch>

Ini mengarahkan pelayan untuk menghantar pengepala tambahan dengan setiap permintaan fail fon, membenarkan akses daripada mana-mana domain.

Penyelesaian Lain yang Mungkin

Jika langkah di atas tidak menyelesaikan isu, pertimbangkan untuk menggunakan pengekodan base64 untuk muka taip fon anda. Walaupun ini bukan penyelesaian yang ideal, ia mungkin berfungsi sebagai pilihan terakhir.

Atas ialah kandungan terperinci Mengapa @font-face Saya Tidak Berfungsi dalam Firefox, Tetapi Berfungsi dalam Chrome dan IE?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!