在 Safari 中而不是 Chrome 中加载字体答案

【问题标题】：Font loading in Safari but not Chrome在 Safari 中而不是 Chrome 中加载字体
【发布时间】：2015-01-17 04:50:53
【问题描述】：

我正在尝试在网页上使用来自 Font Squirrel 的以下 webfont 工具包 - http://www.fontsquirrel.com/fonts/DJ-Gross

在上一页的“Webfont kit”选项卡上，我从下拉列表中选择了“No subsetting”，然后单击“DOWNLOAD @FONT_FACE KIT”

我认为字体松鼠在为您设置@font-face 声明方面做得很好，所以我刚刚在我的 css 中使用了它并移动了字体文件（.eot、.svg、.ttf 和 .woff）到我的网站上使用的适当目录，其中相当确定正确引用了文件路径。

此字体在 Safari 中呈现，但不是在 Chrome 中呈现

不管我的网页，这可以通过打开 Font Squirrel 下载附带的 DJGROSS.html 文件来复制。同样，这个演示适用于 Safari，但不适用于 Chrome，我根本没有接触过 this 代码:)

编辑：

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

}

所有字体文件都与我的 style.css 文件位于同一目录中，此 @font-face 声明所在的目录

【问题讨论】：

没有代码、jsFiddle 或任何东西都帮不上忙……

标签： css google-chrome fonts font-face

【解决方案1】：

正在工作...看看这个image尝试清理你的谷歌浏览器！

【讨论】：

啊，非常感谢 :) 我想我会看看我的 Chrome 实例中可能出现的问题：-/
再次感谢。 fwiw，看起来问题与Mac上的Chrome隔离，当我刚刚在Win7机器上测试时工作正常。在 Mac 上，我还清除了浏览历史记录并尝试使用 --disable-extensions 运行 Chrome，但仍然无法呈现 :(
作为记录，我在 Windows 8 机器上下载了 DJGROSS webfontkit，它也没有为我渲染。我仍然不确定为什么，但我唯一想到的是这个包可能包含一个错误的 woff 文件。
Diego - fontsquirrel 使用其网站上的图像来演示其字体。仅仅因为您在 fontsquirrel 网站上的浏览器中看到它，并不意味着它正在工作。

【解决方案2】：

如果您打开开发控制台并查看浏览器从您的站点中提取了哪些文件，您将能够查看它是否正在 safari 中下载字体文件。像这样的更多信息将有助于我们回答您的问题。

【讨论】：

所以，还是以font-squirrel demo为例进行测试；所有这些文件在我的机器上都是本地的。 Safari 看起来像是在加载 .woff 文件。查看“源”下的 Chrome 开发工具，我看不到它加载任何字体文件。但是，在“网络”选项卡下查看它会加载 .woff 和 .ttf 文件
Chrome 实际上同时加载了woff 和ttf（可能是因为它发现woff 已损坏或其他原因）。无论如何，我在我的 Windows 8 机器上看到了同样的问题 - 我猜包中的字体文件是坏的。