为什么我的 @font-face 不能在 Firefox 中工作？

CSS @font-face 在 Firefox 中不起作用：解决跨域和本地托管问题

Firefox 在渲染定义的自定义字体方面表现出特殊性使用@font-face规则，特别是当HTML和CSS文件驻留在本地或不同的地方时

本地托管 (file:///)

Firefox 对本地文件访问 (file:///) 强制执行严格的来源策略。要解决此问题：

• 导航到 Firefox 地址栏中的 about:config。
• 按“fileuri”过滤并将“security.fileuri.strict_origin_policy”切换为 false。

这允许 Firefox 访问本地字体资源，无论文档路径如何

已发布的网站

如果问题在已发布的网站上仍然存在，则值得考虑：

• 添加访问控制- .htaccess 中的 .ttf、.otf 和 .eot 文件的允许来源标头文件：

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

• 或者，base64 对字体进行编码（尽管出于美观考虑不推荐）。

其他信息

有关此问题的全面概述，请参阅以下内容链接：

• [Firefox 中的 CSS 跨源字体](https://developer.mozilla.org/en-US/docs/Glossary/Prefetch#Cross-origin_font_loading)
• [启用跨域字体火狐](https://stackoverflow.com/questions/19223013/enable-cross-domain-fonts-in-firefox)

以上是为什么我的 @font-face 不能在 Firefox 中工作？的详细内容。更多信息请关注PHP中文网其他相关文章！