图标在白色背景下更加粗细。

Question

4

我正在开发一个网站项目。我想在一些按钮中显示fonticon，并将其颜色设置为白色。然而，改变前景色似乎会改变图标的粗细。在这张图片上，两个按钮都是相同的类和属性，只有颜色属性不同。

我尝试叠加这两个元素，结果显示它们的宽度确实略有不同，这导致在其实际大小下显示时存在巨大差异。

在此链接之后，我尝试使用它们：

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

没有任何成功。

你有什么线索可以干扰这些图标厚度的任何css属性吗？

这与字体本身有关吗？

编辑：

实际大小的截图

- Florent Gz

你能分享矢量图标吗？ - Biswajit Nath

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- tao · Accepted Answer

白色并不会使图标更加粗体。

很可能是你的眼睛感知到了这种方式，因为白色与当前的background-color相比，提供了更大的对比度，而黑色则不然。

但是，从技术角度来看，无论颜色如何，字形的尺寸都是相同的。事实上，考虑到当前的字体技术，根据当前的font-color提供不同的形状是不可能的。

然而，即使在页面级别上，字形大小始终相同，但浏览器或操作系统可能基于旨在提高文本可读性的算法修改呈现的输出。

简单地关闭这些选项（在浏览器或操作系统级别，具体取决于它们的定义位置）应该可以解决问题（其中，通过“问题”，我们指的是：“在从同一页面获取的快照中，呈现的形状尺寸不同”）。