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

Peraturan CSS @font-face Tidak Dipaparkan dalam Firefox Walaupun Keserasian dalam Chrome dan IE

Apabila menghadapi masalah bahawa peraturan @font-face yang ditakrifkan dalam CSS tidak berfungsi dalam Firefox tetapi berfungsi dalam Chrome dan IE, adalah penting untuk mempertimbangkan pelbagai faktor yang boleh mempengaruhi pemaparan fon. Berikut ialah dua penyelesaian yang berpotensi untuk diterokai:

Persekitaran Setempat (file:///)

Firefox menguatkuasakan dasar keselamatan yang ketat apabila mengakses fail setempat (file:///) secara lalai. Untuk menyelaraskan kelakuannya dengan penyemak imbas lain, ubah suai keutamaan berikut dalam "about:config":

• security.fileuri.strict_origin_policy

Tetapkan nilai ini kepada false untuk membenarkan Firefox memuatkan sumber fon tempatan merentas direktori yang berbeza peringkat.

Tapak Web Diterbitkan

Jika isu itu berterusan pada tapak web yang diterbitkan, semak sama ada masalah akses fon berkaitan dengan isu merentas domain, walaupun laluan relatif digunakan. Pertimbangkan untuk menambah pengepala berikut pada fail .htaccess anda untuk jenis fail yang berkaitan (.ttf, .otf, .eot):

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

Walaupun pengubahsuaian ini tidak mungkin menyelesaikan isu ini, ini merupakan langkah penyelesaian masalah yang pantas. Sebagai alternatif, pertimbangkan untuk menggunakan pengekodan base64 untuk membenamkan muka taip fon, yang mungkin berfungsi dalam senario ini.

Untuk panduan lanjut, rujuk sumber berikut: [CSS @font-face: Fail tempatan tidak dimuatkan dalam Firefox](https://stackoverflow.com/questions/16392453/css-font-face-local-files-not-loading-in-firefox).

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