webfonts：@font-face 应该包括字体样式和字体粗细？答案

【问题标题】：webfonts: @font-face should include font-style and font-weight?webfonts：@font-face 应该包括字体样式和字体粗细？
【发布时间】：2016-11-22 12:29:17
【问题描述】：

当包含 @font-face 和 src 来导入网络字体时，我注意到您可以传入 2 个可选值。我目前不这样做。

我有 2 种网络字体，Lato Regular 和 Lato Bold。

我应该在@font-face 规则中指定权重吗？

它说默认情况下它使用常规。

我没有传递任何东西，它似乎正确呈现，即粗体版本似乎是粗体。

想知道推荐的方法以及它有什么优点或缺点吗？

将粗体作为权重传递会迫使浏览器将字体加粗？但它已经很大胆了——对吧？

【问题讨论】：

请发布您的 CSS 代码。
这不是主要基于意见吗？还是我弄错了？
不是 OP，但认为它应该不是基于意见的。字体的原始作者是指定他们设计的每个变体的倾斜和粗体的人，互联网上的随机人员（包括嵌入用户）不应做出不知情的决定，他们正在导入的字体是“看起来”“常规”还是“粗体”，或者它类似于什么样的倾斜。此外，关于细节类型的信息嵌入在字体中，因此从技术上讲，用户代理可以比 user 规范更好地推断它。无论如何，明确的规范应该遵循作者的意图。

标签： css fonts font-face webfonts google-webfonts

【解决方案1】：

是的，你应该这样做。 font-weight 和 font-style 指定您认为的字体。这意味着您可以将作者设计为常规字体的内容嵌入为粗体字体。这也意味着当你使用这样的字体时，你最好使用font-weight: bold，除非没有其他选择，否则用户代理会选择字体。

在你的情况下：

@font-face {
    font-family: "Lato";
    font-style: normal;
    font-weight: 400;
    src: /* The URL of the resource containing the non-slanted regular font face. */
}

@font-face {
    font-family: "Lato";
    font-style: normal;
    font-weight: bold; /* or 700 */
    src: /* The URL of the resource containing the non-slanted font face with 'bold'/700 glyphs. */
}

如果您未在 @font-face 规则中指定 font-weight，则用户代理会假定您的字体具有默认粗细为 400（“常规”）的字形。因此，在引用您的字体的规则中不指定font-weight，仍然默认使用相同的字体粗细，一切都很好，没有冲突。

我还经常使用数字字体粗细，因为自定义字体通常分为半粗体和超粗体渐变，因此使用 font-weight: 600 之类的内容可以让您选择嵌入的半粗体字体（也有font-weight: 600 在其对应的@font-face 规则中）。

【讨论】：