自定义字体渲染问题答案

【问题标题】：Custom font rendering problems自定义字体渲染问题
【发布时间】：2013-04-13 22:33:25
【问题描述】：

所以我有时想像这样强调某些词：

<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;
}

Example here.

问题是，Windows 中的 Chrome 与跨度文本重叠：

Firefox 和 IE 似乎无法顺利呈现字体：

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

谁能告诉我发生了什么，以及如何解决这些问题？

编辑：

有时我在 Chrome 中遇到了这个严重的问题；有时我没有。我也安装了最新的 Chrome：

【问题讨论】：

它在最新的 Chrome 中完美运行：i.imgur.com/Hf2MONa.png
不是答案，而是@您的屏幕 2 和 3：不要指望字体（甚至不是系统字体）在所有代理（浏览器、操作系统、设备...）中呈现相同。
@DannyBeckett Weird，我刚刚再次打开 JSFiddle 链接，这种现象消失了。我什至没有更新我的 Chrome...
@DannyBeckett 它又回来了，在 chrome 上。不知道为什么问题来来去去。重新启动 Chrome 也无济于事。

标签： html css font-face custom-font

【解决方案1】：

Firefox 和 IE 显示字体的原因是 h1 元素默认具有 font-weight: bold，而您将字体声明为 normal 权重。这个浏览器所做的可以说是正确的举动：在缺乏粗体字体的情况下，它们在算法上将字母加粗。

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

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

【讨论】：

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

【解决方案2】：

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

【讨论】：

【解决方案3】：

希望这对将来的某人有所帮助，但我能够通过遵循以下问题中的解决方案来纠正此问题：Chrome svg-Font-Rendering breaks Layout

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

【讨论】：