图标以白色加粗

时间:2019-01-16 11:04:16

标签: css web font-face antialiasing

我正在研究一个Web项目。我想在某些按钮中显示fonticon并将颜色设置为白色。但是,更改前景色似乎会改变图标的​​权重。在此图像上,两个按钮都是相同的类和属性,只是颜色属性不同。

enter image description here

我试图重叠这两个,结果表明确实这两个宽度稍有不同,这在以实际大小显示时会造成巨大差异。

enter image description here

this link之后,我尝试着玩这些游戏:

-webkit-font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
-o-font-smoothing: antialiased;

没有成功。

您是否对可能影响这些图标粗细的css属性有任何了解?

这与字体本身有关吗?

编辑:

实际尺寸的屏幕截图 enter image description here

1 个答案:

答案 0 :(得分:2)

图标不是以白色加粗。

很有可能是您的眼睛以这种方式感知它们,因为白色与当前background-color的对比度比黑色大。

但是,从技术角度来看,字体字形具有相同的尺寸,而与颜色无关。实际上,考虑到当前的字体技术,不可能基于当前的font-color提供不同的形状。

但是,即使字体字形始终具有相同的大小,使用的浏览器或操作系统也可能基于旨在提高文本可读性的算法来修改呈现的输出。 >。

只需关闭这些选项(在浏览器或操作系统级别,具体取决于它们的定义位置),即可解决该问题(通过“问题” 表示:”呈现的形状具有从同一页面获取的快照中的尺寸不同”。