自定义字体渲染问题

Question

有时我想要强调某些词语，像这样：

<h1>I want to <span class="emphasis">emphasize</span> some text.</h1>

同时，我想为h1文本使用自定义字体：

@font-face
{
    font-family: 'MuseoSlab';
    src: url('https://digital_time_capsules.s3.amazonaws.com/fonts/Museo_Slab_500-webfont.eot');
    src: url('https://digital_time_capsules.s3.amazonaws.com/fonts/Museo_Slab_500-webfont.eot?#iefix') format("embedded-opentype"), url('https://digital_time_capsules.s3.amazonaws.com/fonts/Museo_Slab_500-webfont.svg#MuseoSlab500Regular') format("svg"), url('https://digital_time_capsules.s3.amazonaws.com/fonts/Museo_Slab_500-webfont.woff') format("woff"), url('https://digital_time_capsules.s3.amazonaws.com/fonts/Museo_Slab_500-webfont.ttf') format("truetype");
    font-weight: normal;
    font-style: normal;
}

点击此处查看示例。

问题是，Windows中的Chrome会重叠span文本：

Firefox和IE似乎无法平滑地呈现字体：

Opera似乎以我想要的方式呈现它：

有人能告诉我发生了什么，并且如何解决这些问题吗？

编辑：

有时我在Chrome中遇到了这个严重的问题； 有时候不会。 我已经安装了最新的Chrome：

- wrongusername

---

最新版的Chrome可以完美运行：http://i.imgur.com/Hf2MONa.png - Danny Beckett

不是答案，但是针对你的屏幕2和3：不要期望所有代理（浏览器、操作系统、设备等）都能以相同的方式呈现字体（甚至不是系统字体）。 - Linus Caldwell

@DannyBeckett 奇怪，我刚刚再次打开JSFiddle链接，那种现象就消失了。我甚至没有更新我的Chrome浏览器... - wrongusername

@DannyBeckett，我在Chrome浏览器上又遇到这个问题了。不知道为什么这个问题会来来去去。重新启动Chrome也没有帮助。 - wrongusername

Answer 1

Firefox和IE显示字体的原因是，h1元素默认为font-weight: bold，而您将字体声明为normal重量。这些浏览器所做的算法加粗字母可以说是正确的操作，在缺乏加粗字体的情况下。

为了避免这种情况，请添加h1 { font-weight: normal; }。或者，使用字体系列中的加粗字体。

Chrome中奇怪的重叠问题听起来像是安装特定的问题，因此您应首先考虑更新或重新安装Chrome。

- Jukka K. Korpela

---

感谢您对Firefox和IE渲染的解释！至于Chrome，奇怪的是我的朋友在他的笔记本电脑上也遇到了同样的问题，所以我担心这可能是一个比较普遍的问题。 - wrongusername

Answer 2

我曾经在Chrome上遇到过完全相同的问题。这似乎与Chrome中SVG字体的呈现有关。如果您更改@font-face中字体文件的顺序，使SVG位于列表末尾，则问题将消失。在当前版本的Chrome（29.0.1547.76）中，您在jsfiddle上的示例仍会呈现不正确，因此呈现错误仍然存在。

- erikvdv1

Answer 3

希望这能帮助到未来的某个人，我通过遵循以下问题中的解决方案Chrome svg-Font-Rendering breaks Layout成功地解决了这个问题。

这样可以成功修复非平滑边缘，而不会破坏布局和/或挤压字体。

- Wes Cossick