自定义字体未在 Chrome/Safari 中呈现答案

【问题标题】：Custom fonts not rendering in Chrome/Safari自定义字体未在 Chrome/Safari 中呈现
【发布时间】：2016-06-02 21:45:15
【问题描述】：

我正在使用 CSS 方法通过使用 CSS 类中的字体名称来呈现 fonts.com 中的字体，例如

 .myFont h3 {
   background-color: #FFFFFF;
   color: #000000;
   font-family: "ReformaGroteskW01-Mediu";
   font-size: 40px;
   font-weight: normal;
   letter-spacing: 0.04em;
   margin: 0 auto;
   padding: 0 7px;
   text-transform: uppercase;
   width: 105px;

}

并且字体是使用 fonts.com 提供的这个链接标签链接的，这适用于 Firefox，但不适用于 chome 和 Safari，好像 webkit 浏览器没有在这里链接一些东西，我会作为 fonts.com 的支持但我发现他们过去的支持非常缓慢。

<link type="text/css" rel="stylesheet" href="http://fast.fonts.com/cssapi/11386172-45ea-43f5-93bd-d795e60c00af.css">

【问题讨论】：

你能提供一个演示页面的链接吗？ fonts.com API 将只允许该字体显示在您在其 Web UI 中添加的域上，因此很难在无法查看实时示例的情况下进行调试。
在 Chorme 的控制台中显示“资源解释为字体，但使用 MIME 类型 text/html 传输。” GET fast.fonts.com/d/7e24... 403（禁止）
所以，澄清一下，您是否就这个问题联系过 fonts.com 的支持？
是的，我有，但还没有。
我尝试使用这里提到的 mimetype，但似乎没有做任何事情 stackoverflow.com/questions/3594823/mime-type-for-woff-fonts

标签： css fonts webkit

【解决方案1】：

我意识到这个评论是在讨论这个问题几个月后发表的；但是，我自己也遇到了这个问题，并且正在寻找解决方案，并降落在这里。 font.com 提供的字体在 Firefox 中解析正确，但在 Chrome 或 Safari 中解析不正确。我最终通过在 font.com 的域配置中同时指定 www.domainname.com 和 domainname.com 解决了这个问题。事实证明 Chrome 和 Safari 都对此很敏感。（显然 font.com 的域配置不如 typekit 灵活，输入 *.domainname.com 会自动包含 domain.com 和 www.domainname.com。）希望这对某人有所帮助！

【讨论】：

或者有时为了测试目的，IP地址也应该添加到列表中：- *.domain.com - www.domain.com - 5.100.30.10
这个答案应该有更多的赞成票 :) 并且应该被选为正确的答案。谢谢，为我节省了很多时间。

【解决方案2】：

很抱歉您遇到了困难！查看您的 Fonts.com Web Fonts 项目，它似乎仅在几个小时前发布了一些更改（大约在此响应之前四个小时，在您的 StackOverflow 帖子之后几个小时）。目前，在我们的一些测试机器上的一些浏览器中加载您的示例链接 (http://www.fabricproperty.com/) 时，您项目的字体正在正确加载和显示。我还将跟进您的 Fonts.com 支持票关于此问题。

【讨论】：

【解决方案3】：

您为什么不下载您喜欢的字体并将其放入您的文件中？这样更好，也可能解决您的问题。

此外，不要分开使用font-family 和font-size。将它们放在font 标记中。

【讨论】：

没有令人信服的理由使用font 速记，它有其缺陷，并且与手头的问题无关。

【解决方案4】：

您没有描述它在哪种意义上不适用于 Chrome，但您似乎指的是较小的渲染问题：在 Chrome 上，字体以较粗的笔划渲染。这是您应该与字体服务提供商讨论的问题。

字体已加载并在 Chrome 中使用，您可以通过删除 font-family:"ReformaGroteskW01-Mediu" 来编辑 CSS 代码来查看。所以这是字体实现的质量问题。

【讨论】：

【解决方案5】：

如果您希望 fonts.com 的字体在本地工作（没有 403 错误）而不需要配置任何内容，您应该使用 fonts.com 默认支持的“localhost”主机名查看您的站点：

http://www.fonts.com/support/faq/local-host-support

【讨论】：

【解决方案6】：

我注意到只有在添加和编辑域中输入 EdgeCast IP (68.232.35.182) 时才会加载 webfonts。也许 fast.fonts.net 正在使用 EdgeCast CDN，并且域检查获取的是 CDN 地址而不是源请求地址。

【讨论】：