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

标签 html css google-chrome webfonts

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

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

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

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

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

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

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

Hover state Normal state

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

谢谢

最佳答案

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

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

关于html - CSS WebFont 渲染问题 - 1 像素不同的颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23655024/

相关文章:

javascript - 不能在 javascript 中使用 "download"作为函数名

javascript - 谷歌地图控件

javascript - 如何使用 JavaScript 创建带有子项目的可点击的 div 列表

html - 当我使用 ngRouter 时,导航栏不会折叠

javascript - 在输入旁边添加按钮,水平表单样式 - Bootstrap

html - Chrome 中的默认输入边框

javascript - 可以在没有标签的情况下刷新页面并在同一页面中吗? Angular js

javascript - 我正在寻找我在 javascript 中制作的公式的修复

javascript - 使用javascript使文本淡出

css - 如何防止 textarea 超出其父 DIV 元素? (仅限谷歌浏览器问题)