Question

我知道不同的浏览器以不同的方式呈现文本 - 在某种程度上，我很酷。然而，在尝试为一个项目使用图标字体时，Firefox，特别令我恼火。

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

以下是Chrome与Firefox的相似之处。

Chrome 23.0.1271.101（Mac）

http://cl.ly/image/0M3t2S3N2A38/

（完美）

Firefox 17.0.1（Mac）

http://cl.ly/image/053d2J0J312K

（不那么完美的）

你可能会看到我遇到的问题......

我还检查了其他几个浏览器，看它是不是只是firefox。它只是火狐。即便是IE也能做得更好。

代码：

CSS

@font-face {
    font-family: 'icomoon';
    src:url('fonts/icomoon.eot');
    src:url('fonts/icomoon.eot?#iefix') format('embedded-opentype'),
    url('fonts/icomoon.svg#icomoon') format('svg'),
    url('fonts/icomoon.woff') format('woff'),
    url('fonts/icomoon.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}


[class^="icon-"]:before, 
[class*=" icon-"]:before {
    font-family: 'icomoon';
    font-style: normal;
    speak: none;
    font-weight: normal;
    line-height: 1;
    text-align: center;
}


.icon-flkr:before {
    content: "\2b";
}
.icon-fbk:before {
    content: "\2c";
}
.icon-twitter:before {
    content: "\3e";
}
.icon-lfm:before {
    content: "\24";
}
.icon-lkdin:before {
    content: "\25";
}
.icon-inst:before {
    content: "\26";
}

HTML

<ul id="footer_social_list" class="group">
    <li><a href="#" class="icon-twitter" title="Follow me on Twitter"></a></li>
    <li><a href="#" class="icon-fbk"></a></li>
    <li><a href="#" class="icon-lkdin"></a></li>
    <li><a href="#" class="icon-flkr"></a></li>
    <li><a href="#" class="icon-inst"></a></li>
    <li><a href="#" class="icon-lfm"></a></li>
</ul>

我尝试了很多东西来解决这个问题。从用CSS改变不透明度;尝试文字阴影;改变@ font-face，类和继承样式的权重;使用“data-icon”;甚至确保每个图标与像素网格对齐。

在Firefox中没有任何改进产生任何改进，我会说IE9中的Instagram图标略有例外，在每个浏览器中看起来都很好。

为什么Firefox会这样做？我有什么办法可以让它表现出来吗？

PS：我还没有添加-webkit-font-smoothing：antialiased;并不是说无论如何都会影响到Firefox。

Answer 1

-moz-osx-font-smoothing: grayscale;

See the discussion leading to this new vendor prefixed solution for Firefox.

Answer 2

font-weight:normal !important;

这似乎是明显的答案，但没有人提到它。很可能你的锚标签上有一个!important，使它们不再被正常加权。

Answer 3

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

你所谈论的内容发生在所有浏览器中：当你在深色背景上使用浅色文字时，文字似乎更“重”。图标字体也是如此......小细节会膨胀。（CSS字体平滑和文本呈现属性有助于纠正这一问题，但它们在所有浏览器中的工作方式不同。See here.）

如果你想要一个较浅的圆形（不使用SVG）上的深色图标，可以使用一个没有圆圈的图标，然后使用CSS创建自己的圆形背景。你可以绕过它的一种方法。

你不会得到真正的淘汰赛（图标实际上不会是圆圈中的负空间，所以你的按钮背后的任何背景图案都不会通过图标显示），但你会避免使用光文本 - 在黑暗背景下流血。

当然，在旧版IE中你也会失去边界半径......所以权衡（咳咳）重要的是什么。

Firefox图标字体过度粗体抗锯齿

3 个答案: