Mengapa fon saya tidak dimuatkan dalam Firefox apabila menggunakan @font-face dengan URL mutlak daripada domain luaran?

Memahami Cross-Domain @font-face Limitation dalam Firefox

Soalan: Mengapa fon saya tidak dimuatkan dalam Firefox apabila menggunakan @font- muka dengan URL mutlak daripada domain luaran?

Perihalan Masalah:

Coretan kod yang disediakan menggunakan @font-face untuk menentukan fon tersuai yang dihoskan pada "fwy.pagodabox. com" untuk digunakan dalam kedai Shopify. Walau bagaimanapun, dalam Firefox 13.0.1, fon ini tidak dimuatkan, membawa kepada persoalan sama ada ini adalah isu dengan kefungsian Firefox atau sintaks yang digunakan dalam CSS.

Jawapan:

Firefox mengenakan sekatan ke atas memuatkan fon daripada domain luaran melalui @font-face melainkan pengepala kawalan akses khusus disediakan. Apabila mengehos fon pada domain yang berbeza, adalah penting untuk mengkonfigurasi pelayan untuk memasukkan pengepala Access-Control-Allow-Origin dengan nilai * (wildcard) atau domain khusus dari mana fon diminta. Ini membolehkan penyemak imbas mengakses fon merentas sempadan domain.

Untuk pelayan Apache, arahan berikut boleh ditambah pada fail .htaccess untuk mendayakan pemuatan fon merentas domain:

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>

Dengan melaksanakan pengepala kawalan akses ini, fon yang dihoskan pada pelayan pagodabox boleh diakses oleh kedai Shopify dan fon akan dimuatkan dengan betul dalam Firefox.

Atas ialah kandungan terperinci Mengapa fon saya tidak dimuatkan dalam Firefox apabila menggunakan @font-face dengan URL mutlak daripada domain luaran?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!