css - Google Fonts 示例页面和单独页面中的用法之间的 Barlow 渲染差异

标签 css webfonts google-webfonts google-fonts

我们在 Web 应用程序中使用可从 Google 字体免费获得的 Barlow。这是在 Google's example page 上呈现时示例短语的样子. (如果你想重现它,你需要自己输入自定义文本并将 slider 调整到14px。)

A sample phrase rendered in Barlow at Google Fonts

请特别注意 i 底部与其上方的点之间的明显空间,以及 f 顶部的清晰度。

这是相同短语在我们的应用程序中呈现时的样子,如本 Code Pen 中所再现的那样.

The same sample phrase rendered in Barlow on Code Pen using Google Fonts

注意 i 和它的点之间的泥泞空间,以及到 f 的泥泞顶部曲线。

我已经尝试查看相关元素的所有样式,但我找不到任何应该对这些元素产生不同影响的样式。网络选项卡清楚地显示正在加载字体的粗体版本;这看起来不像是人造粗体。

这可能看起来微不足道,但实际上我们对字体在应用中的外观有很多提示,特别是粗体小写的 i 看起来像 l.

有人知道这里会发生什么吗?

更新:在 Mac 上使用 Chrome;我可以在 Firefox 中确认同样的问题。这是在外部显示器上……在视网膜上没有问题,因为有更多细节。

最佳答案

问题原来是a problem with the source repo :“提示在最近的提交中被遗漏了”并且 Google 标本(看起来正确)“实际上运行的是早期版本。”

令人高兴的是,维护者能够在后续版本中修复该问题。

关于css - Google Fonts 示例页面和单独页面中的用法之间的 Barlow 渲染差异,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55188557/

相关文章:

javascript - Chrome 文本装饰线通过防止点击

fonts - 当 Google Fonts 加载失败/缓慢时处理?

css - 谷歌网络字体无法在网络服务器上运行

html - Windows、@font-face 和西里尔字母

html - CSS .wf-无效

html - CSS table nth child() last td 不显示边框

javascript - 在特定 DIV 中打开链接

css - 链接文本只会在我的鼠标悬停在链接区域时显示,而不是整个按钮的任何地方

css - 是否可以为 Google 字体指定自定义名称?

css - 让谷歌网络字体显示字体粗细 100