為什麼我的 CSS @font-face 規則在 Firefox 中不起作用，但在 Chrome 和 IE 中有效？

CSS @font-face 規則在Firefox 中無法渲染，儘管Chrome 和IE 相容

遇到CSS 中定義的@font-face 規則不起作用的問題時在Firefox 中，但在Chrome 和IE 中，必須考慮可能影響字體渲染的各種因素。以下是兩個可探索的潛在解決方案：

本地環境(file:///)

預設情況下，Firefox 在存取本機檔案(file:///) 時強制執行嚴格的安全策略。若要使其行為與其他瀏覽器保持一致，請修改「about:config」中的下列選項：

• security.fileuri.strict_origin_policy

將此值設定為false 允許Firefox 跨不同目錄層級載入本機字體資源。

已發佈網站

如果問題在已發布的網站上仍然存在，請檢查字體訪問問題是否與跨域問題有關，即使使用相對路徑也是如此。考慮將以下標頭新增至相關文件類型（.ttf、.otf、.eot）的.htaccess 檔案：

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

雖然此修改不太可能解決問題，但這是快速故障排除步驟。或者，考慮使用 base64 編碼來嵌入字體，這可能適用於這種情況。

進一步指導，請參閱以下資源：[CSS @font-face：本地檔案未在Firefox 中載入]( https://stackoverflow.com/questions/16392453/css-font-face-local -files-not-loading-in-firefox)。

以上是為什麼我的 CSS @font-face 規則在 Firefox 中不起作用，但在 Chrome 和 IE 中有效？的詳細內容。更多資訊請關注PHP中文網其他相關文章！