当使用来自外部域的绝对 URL 的 @font-face 时，为什么我的字体无法在 Firefox 中加载？

了解 Firefox 中的跨域 @font-face 限制

问题：为什么使用 @font- 时我的字体无法在 Firefox 中加载面对来自外部域的绝对 URL？

问题描述：

提供的代码片段利用 @font-face 定义托管在“fwy.pagodabox.com”上的自定义字体，以便在 Shopify 商店中使用。然而，在 Firefox 13.0.1 中，这些字体没有加载，导致问题是 Firefox 的功能问题还是 CSS 中使用的语法问题。

答案：

Firefox 对通过 @font-face 从外部域加载字体施加限制，除非特定的访问控制标头到位。在不同域上托管字体时，配置服务器以包含值为 *（通配符）的 Access-Control-Allow-Origin 标头或请求字体的特定域至关重要。这允许浏览器跨域边界访问字体。

对于 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>

通过实现这些访问控制标头，Shopify 商店可以访问 pagodabox 服务器上托管的字体，并且字体将在 Firefox 中正确加载。

以上是当使用来自外部域的绝对 URL 的 @font-face 时，为什么我的字体无法在 Firefox 中加载？的详细内容。更多信息请关注PHP中文网其他相关文章！