公共服务公告：注意您的 @font-face 字重

假设您正在浏览 Google 网页字体以查找可在您的网站上使用的免费字体。您找到了您喜欢的字体…

您认为它在您的网站上作为标题会很好看。因此，您按照 Google 网页字体“快速使用”中的说明进行操作。

1) 将 CSS 链接复制/粘贴到页面

<link href='http://fonts.googleapis.com/css?family=Spicy+Rice' rel='stylesheet' type='text/css'>

2) 将 font-family CSS 复制/粘贴到您的标题 CSS 中

h1, h2, h3, h4, h5 {
   font-family: 'Spicy Rice', cursive;

   /* Your other headings CSS */
}

就这样！您做到了，您的标题现在使用您专门选择的字体

但是，您开始注意到字体比您想要的有点模糊。可能很难解释，但它看起来并不像您在 Google 网页字体中选择它时那样好。或者也许其他人注意到，并且

问题是字体比您最初看到的更模糊，这完全是关于font-weight的。

您会看到，浏览器中标题的默认字重是“粗体”（或更确切地说，是 700）。如果您在选择此字体时仔细观察，您可能会注意到

如果您在以下情况下，您可能会成为此问题的受害者

1. 您没有使用重置，也没有为标题指定font-weight（默认为用户代理样式的bold）。
2. 您使用的是Normalize.css，而不是重置，它不会调整font-weight，因为bold是跨浏览器一致的默认值。
3. 您明确地将标题的font-weight设置为bold（例如，如果您使用重置）。

这并非 Google 网页字体或字体本身的错误。只是这种字体没有粗体字重，而您正在明确要求它。这意味着浏览器会尝试为您加粗字体，这可以做到，但做得不是很好（因此很模糊）。

修复它很简单，只需使用您的字重来匹配字体提供的字重即可。

h1, h2, h3, h4, h5 {
   font-family: 'Spicy Rice', cursive;
   font-weight: 400; /* Be specific */
   /* Your other headings CSS */
}

所以是的。简而言之

这个问题在装饰字体中最常见，因为在那里通常只提供一种字重。我会说来自 Typekit 等付费服务的字体通常提供更多字重，但这并不意味着它不会成为 Typekit 的问题，因为明智且推荐的做法是加载尽可能少的字重以减轻页面加载负担。

另外请注意，这在斜体中也是一个常见问题。假设您决定加载一个字体的正常、粗体和斜体版本。如果您的文本同时是粗体和斜体，浏览器将不得不伪造它（因为它没有提供粗体斜体版本），并且看起来会很糟糕。 它发生在我身上在这个网站上，但我认为加载额外的整个站点版本不值得，所以我只是尽量避免这种情况。