Question

我用@ font-face在css中实现了一个字体，在Safari中加载它看起来更胖。有人知道是什么原因引起的吗？

@font-face {
    font-family: 'SerifaBold';
    src: url('/css/serifbol-webfont.eot');
    src: url('/css/serifbol-webfont.eot?#iefix') format('embedded-opentype'),
         url('/css/serifbol-webfont.woff') format('woff'),
         url('/css/serifbol-webfont.ttf') format('truetype'),
         url('/css/serifbol-webfont.svg#SerifaBold') format('svg');
    font-weight: 100;
    font-style: normal;

}

Answer 1

您的font-face规则告诉浏览器这是一个超轻型字体（font-weight: 100部分）。然后，您可能会要求浏览器将此字体用于具有正常权重（font-weight: 400）或粗体（font-weight: 700）的文本。浏览器看到它有一个超轻的字体（因为你这么说）并且需要一个普通的字体，它做了所谓的“合成粗体”：通过略微偏移几次绘制它们，人为地使字母更大胆。

合成粗体没有标准，浏览器的默认行为也不同。

如果您尝试将此字体用于粗体文字，并且它已经是粗体，则应使用font-weight描述符在字体规则中说明。

Answer 2

当使用包含字体系列中包含的不同权重和/或斜体的“字体变体”的网络字体时，请始终应用“font-style：normal”＆amp; font-weight：400; （或font-weight：normal）到每个样式声明。确保为每个变体明确声明每个字体系列：

EG：我正在使用fonts.com的Helvatica Neue

strong, b {
  font-family:'HelveticaNeueW01-75Bold', 'Arial Black', Arial, sans-serif;
  font-weight: 400;
}

em, i {
  font-family: 'HelveticaNeueW01-56It',  Arial, sans-serif;
  font-style: normal;
}

Firefox将通过虚假加粗技术“帮助”你的字体。使用漂亮的@ font-face类型进行虚假化处理，使它们变得非常丑陋并破坏了设计师在创建字体时所做的所有艰苦工作。

这适用于所有字体来源，包括typekit，google，fonts.com和本地托管字体。

Answer 3

我发现同样的事情发生了。它几乎就像它的整体重量应该高于应有的重量。也许尝试使用非粗体版本的字体作为起点？

Answer 4

我客户网站上的同样问题让我发疯，但我终于找到了问题所在。当你在任何CSS课程中调用'SerifaBold'时，请确保你也放font-weight: normal;

这最终解决了我的问题。

@fontface FireFox（10）渲染文本非常粗体

4 个答案: