Mengapa CSS Saya @font-face Tidak Berfungsi dalam Firefox?

CSS @font-face Not Rendering dalam Firefox

Walaupun berfungsi dengan betul dalam Google Chrome dan Internet Explorer, peraturan CSS @font-face tidak berfungsi dalam Firefox. Walaupun kod @font-face nampaknya sah, isu ini nampaknya khusus untuk Firefox. Menyelesaikan masalah percanggahan ini memerlukan pemahaman konfigurasi dan tetapan dalam Firefox.

Dasar URI Fail Setempat

Firefox menggunakan dasar yang ketat mengenai asal usul URI fail (file:///) , yang boleh menghalang pemuatan sumber tempatan. Untuk menangani isu ini, navigasi ke "about:config" dalam bar alamat Firefox, tapis mengikut "fileuri," dan togol pilihan "security.fileuri.strict_origin_policy" kepada palsu. Ini membolehkan Firefox berkelakuan serupa dengan penyemak imbas lain apabila mengendalikan sumber fon tempatan.

Isu Merentas Domain

Jika tapak diterbitkan dan masalah berterusan, ia mungkin perlu untuk mempertimbangkan isu merentas domain yang berpotensi. Walaupun laluan relatif ditentukan dalam kod, menambah pengepala tambahan dalam fail .htaccess adalah disyorkan:

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

Pengepala ini harus menghalang sebarang kemungkinan sekatan merentas domain. Selain itu, adalah mungkin untuk menggunakan pengekodan base64 untuk muka taip fon, yang juga boleh menyelesaikan isu.

Untuk mendapatkan maklumat lanjut dan gambaran keseluruhan yang komprehensif, rujuk sumber yang disediakan dalam jawapan.

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