【发布时间】：2012-12-14 11:24:46
【问题描述】：
我知道不同的浏览器以不同的方式呈现文本——在某种程度上，我对此很满意。然而，在尝试为一个项目使用图标字体时，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、类和继承样式的权重；使用“数据图标”；甚至确保每个图标都与像素网格对齐。
在 Firefox 中还没有任何改进，我想说除了 IE9 中的 Instagram 图标之外，所有浏览器的一切看起来都不错。
那么为什么 Firefox 会这样做呢？我能做些什么来让它正常运行吗？
PS: 我没有添加 -webkit-font-smoothing: antialiased;反正它不会影响 Firefox。
【问题讨论】：
-
你试过
font-weight:400吗？我对字体也有同样的问题，改变字体粗细使它起作用。 -
@onimojo 是的，我尝试在各种类和样式上添加
font-weight:100-900。实际上只会让情况变得更糟，一旦你超过了大约 500... :( -
@alexander 你有没有想过这个问题？我也有同样的问题
-
不怕。对于图标，如果您需要矢量功能，那么 SVG 和 PNG 后备是您最好的选择。我认为 Mac OS X 的渲染问题比 Firefox 的问题更大。
-
尝试设置字体大小，看看是否有任何改变。最好尝试从 16 像素开始的随机尺寸。
标签： html css firefox antialiasing