6

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

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

这是它们看起来像 Chrome 与 Firefox 的对比。

铬 23.0.1271.101 (Mac)

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

（完美的）

火狐 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、类和继承样式的权重；使用“数据图标”；甚至确保每个图标都与像素网格对齐。

在 Firefox 中还没有任何改进，我想说除了 IE9 中的 Instagram 图标稍有例外，每个浏览器中的一切看起来都不错。

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

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

4

3 回答 3

5 
-moz-osx-font-smoothing: grayscale;

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

于 2014-08-13T17:11:25.543 回答
0 
font-weight:normal !important;

这似乎是显而易见的答案，但没有人提到它。很可能你!important的锚标签上有一个沿线的某个地方，使它们不会再次被正常加权。

于 2013-02-22T02:12:13.567 回答
0

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

您所说的在所有浏览器中都会发生：当您在深色背景上使用浅色文本时，文本看起来更“重”。图标字体也是如此……小细节会膨胀。（有 CSS font-smoothing 和 text-rendering 属性可以帮助纠正这个问题，但它们在所有浏览器中的工作方式不一定相同。见这里。）

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

你不会得到真正的淘汰赛（图标实际上不会是圆圈中的负空间，因此按钮后面的任何背景图案都不会通过图标显示），但你会避免深色文本-背景出血。

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

于 2013-09-26T18:53:40.903 回答