為什麼我無法在 Firefox 中從外部網域載入 @font-face 字體？

@font-face 來自外部域的絕對URL：排除Firefox 中的問題

使用@font-face 將外部字體合併到您的網站中規則對於確保一致的版面和品牌至關重要。然而，當在外部網域上託管字體並嘗試在 Firefox 中載入它們時，您可能會遇到字體無法正確渲染的令人沮喪的問題。

此問題源自於 Firefox 強制執行同源策略的事實根據@font-face 請求。當嘗試從不同網域載入字體時，瀏覽器會觸發錯誤，除非字體檔案提供了存取控制標頭。

解決 Apache 中的問題

到要解決此問題並允許在 Firefox 中載入跨來源字體，您需要設定 Web 伺服器以傳送適當的標頭。對於Apache 伺服器，請將以下程式碼新增至您的.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>

此配置將新增必要的Access-Control-Allow-Origin 標頭，其值為“ *”，允許Firefox 從指定的外部網域載入字型。

有了這些標頭，Firefox 現在將能夠按預期訪問和渲染字體，確保跨網頁提供無縫且一致的排版體驗。

以上是為什麼我無法在 Firefox 中從外部網域載入 @font-face 字體？的詳細內容。更多資訊請關注PHP中文網其他相關文章！