Mengapa Fon Saya Tidak Dimuatkan dalam Firefox Apabila Menggunakan @font-face dengan Domain Luaran?

CSS @font-face URL Mutlak daripada Domain Luaran: Menyelesaikan Masalah Pemuatan Fon dalam Firefox

Masalah:

Apabila menggunakan peraturan @font-face dengan URL mutlak untuk memuatkan fon daripada domain luaran, fon gagal dimuatkan dalam Firefox 13.0.1.

Analisis:

Firefox memerlukan Pengepala Kawalan Akses ditetapkan untuk fon yang dimuatkan daripada domain yang berbeza. Khususnya, pengepala Access-Control-Allow-Origin mesti ditetapkan kepada sama ada * atau domain yang dibenarkan untuk meminta fon.

Penyelesaian:

Untuk pelayan Apache, tambahkan kod berikut pada fail .htaccess:

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

Ini akan menetapkan pengepala Access-Control-Allow-Origin kepada *, membenarkan semua domain meminta fon.

Pertimbangan Tambahan:

• Jika anda tidak menggunakan Apache, anda perlu merujuk dokumentasi untuk perisian pelayan khusus anda untuk mengetahui cara menetapkan Pengepala Kawalan Akses.
• Fon yang dihoskan pada subdomain yang berbeza juga memerlukan Pengepala Kawalan Akses ditetapkan dengan betul.
• Pastikan bahawa fon yang digunakan dalam CSS anda sebenarnya dihoskan pada URL yang ditentukan dan mempunyai kebenaran yang betul untuk diakses oleh penyemak imbas web.

Atas ialah kandungan terperinci Mengapa Fon Saya Tidak Dimuatkan dalam Firefox Apabila Menggunakan @font-face dengan Domain Luaran?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!