@font-face 仅在 www 时显示。不在地址。仅域名，正确显示

Posted 2023-02-27

【中文标题】@font-face 仅在 www 时显示。不在地址。仅域名，正确显示

【英文标题】：@font-face displays only when www. not in address. Domain name only, displays correctly

【发布时间】：2011-08-27 13:08:37

【问题描述】：

我有一个 Wordpress 实现的客户端站点，在我的 PC 上的 Firefox 4 中，@font-face 在 www 时呈现得很好。被排除在地址之外。但是，如果您访问完整的 URL，它将不再有效。

我被难住了。有什么想法吗？

【问题讨论】：

您是否使用绝对网址嵌入？你的 CSS 是什么样的？

【参考方案1】：

解决同源字体策略的一种方法是使用相对链接 (../fonts/font-name.ttf) 或绝对链接 (/fonts/font-name.ttf) 到您的字体文件，而不是将 FQDN（完全限定域名）放在 @font-face src 路径（@ 987654325@)。

但是，即使您在样式表中使用灵活的文件路径指向字体文件，如果您从不同于请求的域（或子域）提供 CSS，您仍然会面临同源策略。

由于 WordPress 主题 URL 是使用路径中的完整域名生成的，这本身就是您的大部分问题。

例如，如果您正在查看此页面：

http://example.com/about

字体通过 CSS 来自：

http://www.example.com/css/screen.css

您会遇到相同的来源政策（因为 CSS 中指定的字体是从不同的域提供的。请记住，“www”等子域在技术上被视为一个单独的域）。

解决此问题的一种方法是将 Apache 配置为 forward all incoming URLs 到与您的 WordPress 站点地址匹配的域名。

example.com -> www.example.com（反之亦然）

这样做将确保所有图像、样式表和字体都来自同一个域，从而规避您的问题。

【参考方案2】：

听起来您正在使用 Firefox 默认字体策略。

默认情况下，Firefox 不允许跨域字体（即使有子域）。请参阅以下问题以获得该领域的一些出色帮助：

@font-face fonts only work on their own domain

How to add an Access-Control-Allow-Origin header