4

所以我有时想强调一些这样的词：

<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 与跨度文本重叠：

镀铬重叠

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

看起来参差不齐

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

在此处输入图像描述

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

编辑：

有时我在 Chrome 中遇到了这个令人震惊的问题；有时我没有。我也安装了最新的 Chrome：

在此处输入图像描述

4

3 回答 3

2

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

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

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

于 2013-04-14T05:52:48.967 回答
1

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

于 2013-10-06T14:43:57.720 回答
0

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

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

于 2013-12-12T06:32:07.820 回答