webfonts：@font-face 应该包括 font-style 和 font-weight？

Question

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

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

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

它说默认使用正则。

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

想知道这样做的推荐方法及其优点或缺点吗？

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

Answer 1

是的，你应该。 font-weight 和 font-style 指定您认为的字体。这意味着您可以嵌入作者设计的常规字体，如粗体字体。这也意味着当你使用这样的字体时，你最好使用 font-weight: bold，除非没有其他选择，在这种情况下，用户代理无论如何都会 select 字体。

你的情况：

@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 ("regular") 的字形。因此，在引用你的字体的规则中不指定 font-weight，仍然默认为相同的字体粗细，一切都很好，没有冲突。

我也经常使用数字字体粗细，因为自定义字体经常分为半粗体和超粗体渐变，所以像 font-weight: 600 这样的东西可以让你 select 嵌入半-粗体字体（在其相应的 @font-face 规则中也有 font-weight: 600）。

webfonts：@font-face 应该包括 font-style 和 font-weight？

webfonts: @font-face should include font-style and font-weight?

css

fonts

webfonts

font-face

google-webfonts