Html Firefox图标字体过于粗体抗锯齿

我知道不同的浏览器以不同的方式呈现文本——在某种程度上，我对此很冷静。然而，在一个项目中尝试使用图标字体时，Firefox尤其让我恼火

基本上，我有一排社交媒体图标，它们通过@font-face和一些伪类显示。除了Firefox在很好地呈现它们方面有点问题

下面是Chrome与Firefox的对比

Chrome 23.0.1271.101（Mac）

（完美）

Firefox 17.0.1（Mac）

（不太完美）

你也许可以看到我的问题

我还检查了其他几个浏览器，看看它是否不仅仅是firefox。这只是firefox。甚至我也做得更好

代码：

CSS

HTML

我尝试了很多方法来解决这个问题。通过CSS改变不透明度；尝试文本阴影；更改@font-face、类和继承样式的权重；使用“数据图标”；甚至确保每个图标都与像素网格对齐

Firefox还没有任何改进，我想说的是，除了IE9中的Instagram图标之外，在每一款浏览器中，一切看起来都很好

那么为什么Firefox会这样做呢？我能做些什么让它正常运作吗

PS：我还没有添加-webkit字体平滑：抗锯齿；无论如何，这并不影响Firefox

font-weight:normal !important;

---

这似乎是显而易见的答案，但没有人提及。很可能您有一个

！重要信息

放在你的锚定标签上，防止它们再次正常称重。

这是另一个没有人提到的明显答案：

你所说的在所有浏览器中都会发生：当你在深色背景下使用浅色文本时，文本看起来更“重”。图标字体也是如此。。。这些小细节会浮出水面。（CSS字体平滑和文本呈现属性有助于纠正这一问题，但它们在所有浏览器中的工作方式不一定相同。）

如果您希望在较浅的圆形状上有一个深色图标（不使用SVG），一种解决方法是使用没有圆的图标，然后使用CSS创建您自己的圆背景

你不会得到一个真正的击倒（图标实际上不会是圆圈中的负空间，因此按钮后面的任何背景图案都不会通过图标显示），但你会避免黑色背景上的浅色文本被击倒

当然，在旧版本中也会丢失边界半径，例如。。。所以，权衡一下什么更重要

-moz-osx-font-smoothing: grayscale;

---

您是否尝试过

字体大小：400

？我对字体也有同样的问题，更改字体的重量使其正常工作。@onimojo是的，我尝试在各种类别和样式上添加

font-weight:100-900

。事实上只会让事情变得更糟，一旦你超过500（@alexander你有没有发现这个问题？我有同样的问题恐怕没有。对于图标，如果你需要矢量功能，那么SVG和PNG是你最好的选择。我认为Mac OS X的渲染比Firefox的渲染更重要。试着设置字体大小，看看是否有任何变化。最好尝试从16开始的随机大小谢谢大家的回答，不过我不认为这是一个代码问题。我担心这只是Firefox的工作方式。所有的建议都不起作用，因此我只能得出结论，在web上使用矢量图标的情况下，SVG在渲染方面是最可靠的。很有魅力！为什么在18M中没有人投票支持这个呢月和1500多个视图？谢谢。

font-weight:normal !important;

-moz-osx-font-smoothing: grayscale;