使用 Shopify 时在 mozilla 上出现 @font-face 问题答案

【问题标题】：issue with @font-face on mozilla while using Shopify使用 Shopify 时在 mozilla 上出现 @font-face 问题
【发布时间】：2013-01-25 10:13:22
【问题描述】：

我正在使用 css

 @font-face {
 font-family: ChangaOne-Regular;
 src: url({{ 'changaone-regular.eot' | asset_url }});
 src: url({{ 'changaone-regular.eot?#iefix' | asset_url }}) format('embedded-opentype'),  url({{ 'changaone-regular.woff' | asset_url }}) format('woff'),  url({{ 'changaone-regular.ttf' | asset_url }}) format('truetype'),  url({{'changaone-regular.svg#changaone-regular' | asset_url }}) format('svg');
 font-weight: normal;
 font-style: normal;
}

我已将字体保存在 images 文件夹中。由于它没有采用字体，因此我在我的 css 文件中的文件夹中创建了字体的副本。

现在它可以在 chrome 上完美运行。但是在 Mozilla 中，字体没有被读取。我发现我们可以通过将 htaccess 添加到包含内容的 css 文件的文件夹来解决此问题

<FilesMatch "\.(ttf|otf|eot|woff|font.css)$">
  <IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "*"
  </IfModule>
</FilesMatch>

这在 Firefox 中也没有任何区别。那么我们该如何解决这个问题呢？任何的想法？

【问题讨论】：

标签： css font-face shopify

【解决方案1】：

尝试使用字体文件的绝对 URL。

【讨论】：

Firefox 调试日志是否显示任何内容？（按ctrl+shift+k然后刷新页面）
[08:54:12.459] 可下载字体：下载失败（字体系列：“ChangaOne-Regular”样式：正常重量：正常拉伸：正常 src 索引：1）：错误 URI 或交叉站点访问不允许来源：assets0.zipzoomautodealer.com/alpha/files/1959/1957/assets/…
我已经通过使用@import 添加谷歌字体解决了这个问题。谢谢你的帮助:-)
很酷的东西，随时！我遇到了一些 FF 网络字体问题，它们似乎总是与 URL 相关！
是的，这也是 url 相关的。我在 shopify 网站上使用它，我们正在使用完整的 url 字体。字体的域名也不会是我们网站的域名。所以我不得不设置 Access-Control-Allow-Origin。还是不行。