@font-face-奇怪的CSS字体请求URL

Question

这是一个愚蠢的问题，我想有一个简单的解决办法。我在Wordpress主题中使用web字体--我正在工作的站点有两个域，可以用来访问同一个站点。

在我的CSS中，我使用了font-squirrel格式来声明字体：

@font-face {
    font-family: 'Oswald';
    src: url('oswald-regular-webfont.eot');
    src: url('oswald-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('oswald-regular-webfont.woff') format('woff'),
         url('oswald-regular-webfont.ttf') format('truetype'),
         url('oswald-regular-webfont.svg#Oswald') format('svg');
    font-weight: normal;
    font-style: normal;
}

当我转到其中一个域时，这工作很好，但是当我通过另一个域转到站点时，字体无法加载，因为它被认为是“跨站点”请求。基本上，当我访问domain1.com时，html" target="_blank">请求如下所示:http://www.domain1.com/fonts/oswald-regulation-webfont.ttf

但当我访问domain2.com时，请求仍然是这样的。为什么？既然我使用的是相对路径，那么domain2.com是不是应该请求：http://www.domain2.com/fonts/oswald-regulation-webfont.ttf

有人知道我搞砸了什么吗？Wordpress是不是在CSS中注入了完整的路径？

注意：它在Chrome中工作，但在Firefox或IE10中不行。Chrome有同样奇怪的URL行为，区别只是Chrome允许跨站点请求。

Answer 1

这可能是因为您使用get_stylesheet_directory_uri()或类似方法获取CSS文件的路径，然后在wp_enqueue_style()调用中使用该路径。

当它呈现给浏览器时，页面将具有文件的完整路径，而不是相对路径，这意味着字体文件是相对于另一个站点的，因此它是跨站点的。