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

Question

在谷歌浏览器（34.0.1847.131）中，可能还有其他浏览器，我们使用MyFonts的网页字体出现奇怪的渲染问题。

如下面的屏幕截图所示，文本顶部有一个像素，用于加载默认/上一个颜色。

当悬停时，顶部像素线为白色（正常状态颜色），当处于非活动状态时，顶部像素线为默认文本（非锚定）颜色。

这种情况发生在使用字体的网站的所有部分，只有在使用webfont时才会发生。

我已尝试调整文字渲染模式和线高，但都没有解决问题。

font-size设置为100％（在所有元素上），这从body元素继承16px，有趣的是将其更改为18px可以解决渲染问题。

尝试过使用其他标准字体，而不是使用其他标准字体。我认为，字体文件不是直接加载的。

解 从显示改变了锚：内联;显示：内联块;因为锚不能正确拟合文本。

由于

Answer 1

如果不查看实际示例，很难说，但我认为您可能会遇到this problem。字体指标允许字体在其容器外运行，Chrome中的错误会阻止这些部分接收悬停颜色。

尝试在元素上设置背景颜色，以查看是否有任何像素实际耗尽了元素。要修复它，你需要让元素真正包装文本（例如，给它一个顶部填充。）