字体在浏览器中变粗

Question

我在一个网站上使用的是 Open Sans 字体，但它在所有浏览器中看起来比在 Adob​​e Illustrator 中粗得多（见附图）。为什么会这样，有什么方法可以让浏览器中的字体显示 "thinner"？

备注 浏览器和 Illustrator 都在渲染半粗体字重 (600)

Answer 1

确保您为 Open Sans 包括轻 (300) 和正常 (400) 权重，然后您可以简单地：

body {
    font-family: 'Open Sans', sans-serif;
    font-weight: 300; /* Or 400, if 300 is too light. */
}

Answer 2

Open Sans Webfont 有 10 种样式。对我来说，它看起来像浏览器显示半粗体。它应该是规律的，你应该没问题。

看看 fontsquirrel

http://www.fontsquirrel.com/fonts/open-sans

Answer 3

简单的答案是没有修复。如果您正确地加载和调用了所需的样式和粗细，那么有时 adobe 和 web 浏览器（或浏览器到浏览器）之间的呈现方式会有所不同。您的选择是增加 400 磅重量或学会喜欢这种大胆。

Answer 4

问题出在别名上。以下 css 解决方案适用于 safari、chrome 和 firefox：

-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;