在谷歌浏览器 (34.0.1847.131) 中,可能还有其他浏览器,我们遇到了使用 MyFonts 的网络字体的奇怪渲染问题。
如下面的屏幕截图所示,文本顶部有一个像素,它正在加载默认/以前的颜色。
悬停时顶部像素线为白色(正常状态颜色),当不活动时顶部像素线为默认文本(非 anchor )颜色。
这发生在网站所有使用该字体的部分,并且仅在使用 webfont 时发生。
我试过调整文本渲染模式和行高,都没有解决问题。
字体大小设置为 100%(在所有元素上),这从 body 元素继承了 16px,有趣的是将其更改为 18px 解决了渲染问题。
已尝试使用其他标准字体,但尚未使用其他网络字体。我相信,字体文件是直接加载的,而不是远程加载的。
解决方案 从显示更改了 anchor :内联;显示:内联 block ;因为 anchor 没有正确匹配文本。
谢谢
最佳答案
不看实际例子很难说,但我想你可能正在经历 this problem .字体指标允许字体在其容器外运行,而 Chrome 中的一个错误阻止这些部分接收悬停颜色。
尝试在元素上设置背景颜色,看看是否有任何像素实际用完了元素。要修复它,您需要让元素真正包裹文本(例如,通过给它一个顶部填充。)
关于html - CSS WebFont 渲染问题 - 1 像素不同的颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23655024/