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

Question

我在Wordpress实现上有一个客户端站点，在我的PC上有一个Firefox 4，@ font-face在www时表现得很好。被遗漏在地址之外。但是，如果您访问完整的网址，则不再有效。

我很难过。有什么想法吗？

Answer 1

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

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

@font-face fonts only work on their own domain

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

Answer 2

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

但是，即使您使用样式表中的字体文件的灵活文件路径，如果您为CSS表单提供的域名（或子域名）不同于其请求的域名，您仍将面临与原产地政策相同。

由于WordPress主题网址是使用路径中的完整域名生成的，因此这本身就是您的问题。

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

http://www.example.com/fonts/font-name.ttf

并且字体通过CSS提供：

http://example.com/about

您将遇到相同的原始策略（因为CSS中指定的字体是从不同的域提供的。请记住，诸如“www”之类的子域在技术上被视为一个单独的域。）

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

http://www.example.com/css/screen.css（反之亦然）

这样做可以确保所有图片，样式表和字体都来自同一个域，从而避免了您的问题。