是否可以使 font-weight: bold 等于 500 而不是 700？

Question

我刚刚在玩 Google Fonts 并找到了 Fira Sans 字体。很好，但我不喜欢 Bold (700) 样式，它太粗了，我不喜欢。但是，如果我选择 Medium (500) 样式，则浏览器不会将它用于任何设置为font-weight: bold（例如<strong>）的内容。相反，它使用某种看起来模糊的人造粗体。

我可以浏览我的样式表并将每次出现的boldto设置为500。我也可以使用 Sass 设置一个变量$bold-weight: 500;，如果我决定稍后更改字体，这会有所帮助。

这是一个有点痛，虽然，加上bold也是许多浏览器样式的默认（例如<strong>，<th>），所以我必须确保我抓住的那每一个可能发生了。并且可能存在我无法控制的外部脚本/样式。

有没有办法使所有出现的bold使用权重为 500？

Answer 1

就在这里，

当您选择快速使用谷歌字体时，系统会向您提供一个包含在标题中的链接，在您的网络浏览器中打开该链接，您将看到一个包含大量内容的 css 文件。

/* cyrillic-ext */

@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 400;
  src: local('Roboto Italic'), local('Roboto-Italic'),   url(https://fonts.gstatic.com/s/roboto/v15/WxrXJa0C3KdtC7lMafG4dRTbgVql8nDJpwnrE27mub0.woff2) format('woff2');
  unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F;
}

正如您所看到的，font-style: italic 和font-weight: 400与标签内的某些特定字体（此处为 Roboto Italic）链接@font-face，这意味着每当您使用font-weight: italicwith font-weight: 400（或normal） 时，它都会引用 src 属性中描述的字体。

现在，如果你想让font-weight: bold你的CSS中的所有内容都使用这个字体，只需将400上面的字体样式更改为bold即可。

或者您可以复制完整的 @font-face{..} 并在其中使用另一种字体样式。

另外，您可以使用不同的字体此外，您也确保 @font-face 中仅保留一个 font-style 或 font-weight 标签。

此示例使用谷歌字体，您可以对自托管字体使用相同的技术。