CSS 年鉴 → 属性 → F → font-weight

font-weight

Avatar of Louis Lazaris
Louis Lazaris 于

DigitalOcean 为您旅程的每个阶段提供云产品。 立即开始使用 $200 免费额度！

font-weight 属性设置字体的粗细，它依赖于字体系列中可用的字体面或浏览器定义的权重。

span {
  font-weight: bold;
}

font-weight 属性接受关键字值或预定义的数字值。 可用的关键字是

  • normal
  • bold
  • bolder
  • lighter

可用的数字值是

  • 100
  • 200
  • 300
  • 400
  • 500
  • 600
  • 700
  • 800
  • 900

关键字值 normal 映射到数字值 400，而值 bold 映射到 700。

为了看到除了 400 或 700 以外的其他值的任何效果，所使用的字体必须具有与这些指定的权重匹配的内置字体面。

如果字体作为字体系列的一部分具有粗体 (“700”) 或正常 (“400”) 版本，浏览器将使用它。 如果这些不可用，浏览器将模拟自己的字体粗体或正常版本。 它不会模拟其他不可用的权重。 字体通常使用诸如“Regular”和“Light”之类的名称来标识任何备用字体权重。

以下演示展示了备用权重值的用法

上面的演示使用免费字体 Open Sans，它使用 Google Web Fonts API 嵌入。 该字体已加载所有可用的字体权重，因此使用 font-weight 属性，不同的可用权重将如每段文本所述显示。 不可用的权重只是显示逻辑上最接近的权重。

常见的字体（如 Arial、Helvetica、Georgia 等）没有除了 400 和 700 以外的其他权重。 因此，使用其中一种字体显示的相同演示将在九段中仅显示两个权重。

使用“bolder”和“lighter”关键字

关键字值 bolder 和 lighter 相对于父元素的计算字体权重。 浏览器将根据字体系列中可用的内容查找最接近的“bolder”或“lighter”权重，否则它将简单地选择“400”或“700”，具体取决于哪个最合理。

子元素不会继承“bolder”和“lighter”关键字值，而是继承计算后的权重。

浏览器支持

其他资源

Psst! 创建一个 DigitalOcean 帐户并获得 $200 免费信用 用于基于云的托管和服务。

评论

  1. Petr Chutny
    评论永久链接#

    您好，感谢您的文章！我仍然有点困惑——更粗体应该比粗体更粗，所以可能是 800、900 吗？

    回复
    • Louis
      评论永久链接#

      不，不一定。“更粗体”不是绝对的权重，而是相对于现有字体的粗细而言。因此，如果字体从常规权重开始，它可能映射到 700。有点令人困惑，但只要意识到它不是相对于“粗体”关键字，而是相对于字体的粗细（或轻盈），无论当前是什么。

  2. Daniel
    评论永久链接#

    很棒的文章，因为它指出了我一直遇到的许多浏览器支持问题。我发现某些浏览器无法读取相同的字体权重，即使在头部使用链接标签声明不同的权重时也是如此。即使在支持的 Google 字体权重为 400 的情况下，Google Chrome 似乎也会忽略字体权重 400。
    我找到的唯一解决方案是将这些权重声明为“normal”，使其正常工作，但这让我很困惑，因为为什么在所有其他浏览器中都能正常工作。可能只是这种特定的字体，但这确实让我很困惑。

    回复
  3. WM Spielplan
    评论永久链接#

    您好，
    我可以为不同的浏览器使用不同的字体权重吗？我在 Safari 中使用 Typekit 中的 FF Dagny Pro 字体，它很适合阅读，但在 Firefox 中却很糟糕。所以我会为 Safari 使用 font-weight: 200; 而为其他浏览器使用 font-weight:400;

    有可能这样做吗？谢谢！

    回复
    • Louis Lazaris
      评论永久链接#

      我不建议这样做，但您必须使用浏览器黑客

      http://browserhacks.com/

      我不知道是否有您可以用于所需内容的黑客，但您可以搜索该网站。您也可以使用 UA 检测，但这更糟糕。

      最佳选择：使用在所有地方看起来都很好的权重，即使不完美。

  4. Noufal Binu
    评论永久链接#

    为什么 css 粗体关键字在没有 span 的情况下不起作用，而 font-weight: normal; 却能起作用。

    回复
  5. aw media webdesign
    评论永久链接#

    在使用 Chrome 和包含 Open Sans 300、400 和 600 的 Win7 中，它只显示两种变体（400 和 700）。所以，Louis 建议使用在所有情况下都能显示良好的字体权重是最佳的实际解决方案。

    回复
  6. beast
    评论永久链接#

    菜鸟，这很容易

    回复
  7. Pratik
    评论永久链接#

    不过，在 Open Sans Demo 中，600 版本的 600 和 700 几乎看起来一样。
    我正在处理一个使用 Google Fonts 中的 Open Sans 的项目，我为导航栏使用了 600 权重变体，几天后它们开始看起来像 700。Google Fonts 样式表中是否有问题，或者它们没有提供正确的字体。

    回复
  8. Thoman
    评论永久链接#

    感谢您撰写这篇文章。我实际上想弄清楚 Photoshop 如何处理其粗体按钮的使用——肯定不是使用来自实际字体的粗体变体，不幸的是。

    Johannesburg 网站设计,
    Thoman

    回复
  9. Bodo
    评论永久链接#

    请注意，根据 W3C 规范，“更粗体”和“更轻”关键字不使用字体中可用的所有变体。相反，“更粗体”仅使用 400、700 和 900，而“更轻”仅使用 100、400 和 700。

    例如，请参见此处“相对权重的含义”
    https://mdn.org.cn/en-US/docs/Web/CSS/font-weight

    回复
  10. genesisgallery1
    评论永久链接#

    现在是 2018 年，您终于回答了我两天来一直在寻找的问题。所以“更粗体”和“更轻”是相对于当前字体权重的。为什么 3wschools 没有这么说！谢谢！！

    回复
  11. Andrés
    评论永久链接#

    嗨！我注意到字体在 Linux 中（至少是 Chrome/Chromium 和 Firefox）是如何被字体权重规则扭曲的，在某些情况下，随着字体权重的增加，字形高度会降低。我想这是一种难看的错误。
    屏幕截图：http://oi63.tinypic.com/2lsi0xh.jpg
    注意大写字母“T”的高度与字母“h”以及数字有关。

    回复

发表回复

Your email address will not be published. Required fields are marked *

© 2024 . All rights reserved.