html - CSS WebFont 渲染问题 - 1 像素不同的颜色

Question

在谷歌浏览器 (34.0.1847.131) 中，可能还有其他浏览器，我们遇到了使用 MyFonts 的网络字体的奇怪渲染问题。

如下面的屏幕截图所示，文本顶部有一个像素，它正在加载默认/以前的颜色。

悬停时顶部像素线为白色(正常状态颜色)，当不活动时顶部像素线为默认文本(非 anchor )颜色。

这发生在网站所有使用该字体的部分，并且仅在使用 webfont 时发生。

我试过调整文本渲染模式和行高，都没有解决问题。

字体大小设置为 100%(在所有元素上)，这从 body 元素继承了 16px，有趣的是将其更改为 18px 解决了渲染问题。

已尝试使用其他标准字体，但尚未使用其他网络字体。我相信，字体文件是直接加载的，而不是远程加载的。

解决方案从显示更改了 anchor :内联；显示:内联 block ；因为 anchor 没有正确匹配文本。

谢谢

Answer 1

不看实际例子很难说，但我想你可能正在经历 this problem .字体指标允许字体在其容器外运行，而 Chrome 中的一个错误阻止这些部分接收悬停颜色。

尝试在元素上设置背景颜色，看看是否有任何像素实际用完了元素。要修复它，您需要让元素真正包裹文本(例如，通过给它一个顶部填充。)