Chrome 不渲染没有实体填充的字体答案

【问题标题】：Chrome not rendering Font without Solid FillChrome 不渲染没有实体填充的字体
【发布时间】：2018-01-25 06:36:49
【问题描述】：

我正在尝试使用位于 dafont.com 的字体，名为 HelloEtchASketch。

我下载了字体并将其放在我的项目文件夹中。字体在 Firefox 和 Safari 中按预期呈现，但在 Chrome 中不呈现。

Safari：

铬：

在 Safari 中可以看到角色身体中漂亮的草图效果，但在 Chrome 中看不到。铬似乎填满了角色的身体。

有人可以为此提出原因和可能的解决方案吗？我已经搜索了几个小时来寻找答案，但我找不到任何有用的东西。

注意：我在 OS X 上使用 Chrome。

感谢您的宝贵时间！谢谢。

【问题讨论】：

抗锯齿？如今，它们是不同的渲染引擎。
@DanielA.White 当我添加时：-webkit-font-smoothing: antialiased;对于 css，Safari 上的字体线条较细，但在 Chrome 上，它仍然是实心填充。
哪个font-weight ？你用它的元素是什么？在带有font-weight:normal 或@font-face 的font-weight : bold 在<hX> 元素中的chrome 上为我工作。

【解决方案1】：

和朋友一起探索，我们发现在 Chrome 中，例如，当你在标题标签之间放置文本时，字体的笔画会变得非常大。

在 css 中的 h1 元素中设置此属性有帮助：

字体粗细：100；

它只发生在 Chrome 中。

我希望这可以帮助将来可能遇到此问题的其他人！

【讨论】：

:-) 这回答了我的评论。因此，如果您打算仅在通常为粗体的元素中使用此字体（似乎此字体是为它制作的），则更好的解决方法是告诉浏览器此字体旨在为粗体。 @font-face{ font-family: ... src: url(... font-weight: bold} 这样浏览器就不会尝试自己创建粗体了。
太棒了！感谢您的建议！