Mengapa @font-face Saya Tidak Berfungsi dalam Firefox?

CSS @font-face Tidak Berfungsi dalam Firefox: Menyelesaikan Isu Rentas Domain dan Pengehosan Setempat

Firefox mempamerkan keanehan dalam menghasilkan fon tersuai yang ditakrifkan menggunakan peraturan @font-face, terutamanya apabila fail HTML dan CSS berada secara setempat atau berbeza domain.

Penghosan Tempatan (file:///)

Firefox menguatkuasakan dasar asal yang ketat untuk akses fail tempatan (file:///). Untuk menyelesaikan masalah ini:

• Navigasi ke about:config dalam bar alamat Firefox.
• Tapis mengikut "fileuri" dan togol "security.fileuri.strict_origin_policy" kepada false.

Ini membolehkan Firefox mengakses sumber fon tempatan tanpa mengira laluan dokumen peringkat.

Tapak Diterbitkan

Jika masalah berterusan pada tapak web yang diterbitkan, perlu dipertimbangkan:

• Menambah Kawalan Akses- Pengepala Allow-Origin ke fail .ttf, .otf dan .eot dalam .htaccess fail:

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

• Sebagai alternatif, base64 mengekodkan muka taip fon (walaupun tidak disyorkan untuk estetika).

Maklumat Tambahan

Untuk mendapatkan gambaran menyeluruh tentang isu ini, rujuk perkara berikut pautan:

• [Fon Silang Asal CSS dalam Firefox](https://developer.mozilla.org/en-US/docs/Glossary/Prefetch#Cross-origin_font_loading)
• [Dayakan Fon Merentas Domain masuk Firefox](https://stackoverflow.com/questions/19223013/enable-cross-domain-fonts-in-firefox)

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