这是一个愚蠢的问题,我假设有一个简单的解决方法。我在 Wordpress 主题中使用网络字体 - 我正在使用的网站有两个可用于访问同一网站的域。
在我的 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 时,请求如下所示: http://www.domain1.com/fonts/oswald-regular-webfont.ttf
但是当我访问 domain2.com 时,请求仍然看起来像那样。为什么?由于我使用的是相对路径,domain2.com 不应该请求: http://www.domain2.com/fonts/oswald-regular-webfont.ttf
有人知道我在这里搞砸了什么吗? Wordpress 是否以某种方式将完整路径注入(inject) CSS?
注意:它适用于 Chrome,但不适用于 Firefox 或 IE10。 Chrome 具有相同的奇怪 URL 行为,不同之处在于 Chrome 允许跨站点请求。
最佳答案
这很可能发生,因为您正在使用 get_stylesheet_directory_uri()
或类似的方法来获取 CSS 文件的路径,然后在 wp_enqueue_style()
调用中使用它。
当这呈现给浏览器时,页面将具有其中文件的完整路径,而不是相对路径,这意味着字体文件是相对于另一个站点的,因此它是跨站点的。
关于html - @font-face - 奇怪的 CSS 字体请求 URL,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20256362/