【发布时间】：2019-10-02 10:53:28
【问题描述】：
我们在网络应用中使用了 Barlow，可从 Google 字体免费获得。这是在Google's example page 上呈现时示例短语的外观。 （如果要复现，需要自己输入自定义文字，调整滑块为14px。）
请特别注意i 底部与其上方的点之间的明显空间，以及f 顶部的清晰度。
这就是相同短语在我们的应用程序中呈现时的外观，在此Code Pen 中重现。
注意i 和它的点之间的泥泞空间，以及到f 的泥泞顶部曲线。
我已尝试查看相关元素的所有样式，但找不到任何可以对这些元素产生不同影响的样式。网络选项卡清楚地显示正在加载字体的粗体版本；这看起来不像是假粗体。
这可能看起来微不足道，但实际上我们对字体在我们的应用中的外观有很多抱怨，特别是粗体小写的i 看起来像l。
有人知道这里会发生什么吗？
更新：在 Mac 上使用 Chrome；我可以在 Firefox 中确认同样的问题。这是在外部显示器上......在视网膜上没有问题，因为有更多细节。
【问题讨论】：
-
对我来说，codepen 看起来像是顶级示例。您使用的是什么浏览器/操作系统组合？
-
这是一个屏幕渲染问题。在笔中对我来说也很干净。您的文本为 14 像素，对于文本而言偏小，尤其是在移动设备中。与
700font-weight 相结合，导致渲染光栅化像素时出现差异。也许将字体大小提高一个档次？ -
@zgood：在 Mac 上使用 Chrome。我更新了问题以添加该信息。
-
@Simran 这不是一个不合理的建议，我们可能会要求设计团队这样做。但如果可能的话，我想解开为什么在 Google 的示例中以这种大小显示的文本非常清晰的谜团。
-
我过去在 Mac 上遇到过字体渲染问题。您可以尝试的一件事是从 google 下载 Barlow 字体文件，然后使用像 FontSquirrel 这样的网站来创建一个 webfont 工具包，看看您是否有更好的运气
标签： css webfonts google-webfonts google-fonts