Google 字体示例页面和单独页面中的用法之间的 Barlow 渲染差异
Barlow rendering difference between Google Fonts example page and usage in a separate page
我们在 Web 应用程序中使用 Google 字体免费提供的 Barlow。这是在 Google's example page 上呈现时示例短语的外观。 (如果要复现,需要自己输入自定义文字,将滑块调到14px
。)
请特别注意 i
底部与其上方的点之间的明显 space,以及 f
顶部的清晰度。
这是在我们的应用程序中呈现的同一个短语的外观,如此 Code Pen。
注意 i
及其点之间的泥泞 space,以及 f
的泥泞顶部曲线。
我已经尝试查看相关元素的所有样式,但我找不到任何应该对这些元素产生不同影响的样式。网络选项卡清楚地显示正在加载字体的粗体版本;这看起来不像是人造粗体。
这可能看起来微不足道,但实际上我们对字体在我们的应用程序中的外观有很多抱怨,特别是粗体小写 i
看起来像 l
。
有人知道这里会发生什么吗?
更新: 在 Mac 上使用 Chrome;我可以在 Firefox 中确认同样的问题。这是在外部显示器上...在视网膜上没有问题,因为有更多细节。
问题原来是 a problem with the source repo:"hinting got missed in the most recent commit" 而 Google 标本(看起来正确)是 "actually running an earlier version."
令人高兴的是,维护者能够在后续版本中修复该问题。
我们在 Web 应用程序中使用 Google 字体免费提供的 Barlow。这是在 Google's example page 上呈现时示例短语的外观。 (如果要复现,需要自己输入自定义文字,将滑块调到14px
。)
请特别注意 i
底部与其上方的点之间的明显 space,以及 f
顶部的清晰度。
这是在我们的应用程序中呈现的同一个短语的外观,如此 Code Pen。
注意 i
及其点之间的泥泞 space,以及 f
的泥泞顶部曲线。
我已经尝试查看相关元素的所有样式,但我找不到任何应该对这些元素产生不同影响的样式。网络选项卡清楚地显示正在加载字体的粗体版本;这看起来不像是人造粗体。
这可能看起来微不足道,但实际上我们对字体在我们的应用程序中的外观有很多抱怨,特别是粗体小写 i
看起来像 l
。
有人知道这里会发生什么吗?
更新: 在 Mac 上使用 Chrome;我可以在 Firefox 中确认同样的问题。这是在外部显示器上...在视网膜上没有问题,因为有更多细节。
问题原来是 a problem with the source repo:"hinting got missed in the most recent commit" 而 Google 标本(看起来正确)是 "actually running an earlier version."
令人高兴的是,维护者能够在后续版本中修复该问题。