【问题标题】:font-weight:700 or font-weight:bold which one we should follow in CSS?font-weight:700 或 font-weight:bold 在 CSS 中我们应该遵循哪一个?
【发布时间】:2012-06-10 04:11:41
【问题描述】:

我看过一些网站,它们在 CSS 中提到 - font-weight: 700font-weight: bold。但是两个结果是一样的。哪一个是正确的,我们应该如何遵循?请给我建议。

【问题讨论】:

  • 如果你想要你的文字加粗,那么你应该使用font-weight:bold;
  • 一般来说,当字体具有适合数字权重之一的字体时,浏览器应该显示该字体。过去,像 Safari 和 IE 这样的浏览器并没有遵循这一点,而是显示了适当的 font-weight: 600 字体,而普通字体则以仿粗体显示。另见destination-code.blogspot.com/2009/01/…
  • 从语义的角度来看,我更喜欢单词而不是数字。 thin300bold700 更容易阅读。不过个人喜好。

标签: css text-rendering


【解决方案1】:

您可以在CSS Fonts Module Level 3 Specification 中找到font-weight 的所有有效值的完整细分。在section 3.2(字体权重属性)下,我们找到以下列表:

  • 100 - 薄
  • 200 - 超轻(超轻)
  • 300 - 光
  • 400 - 正常
  • 500 - 中等
  • 600 - 半粗体(半粗体)
  • 700 - 粗体
  • 800 - 超粗体(超粗体)
  • 900 - 黑色(重)

您可能注意到700 是“粗体”。所以无论哪种方式,你都会得到相同的结果。 (唯一对应于数字的另一个是“正常” - 400。)

完整列表是:

normal - 与“400”相同
bold - 与“700”相同
bolder - 指定比继承值更粗的粗细
lighter - 指定较轻的粗细比继承的值

没有真正的区别。更多的是关于你和你的团队习惯的东西。

【讨论】:

  • Firefox 不尊重这一点。我不知道其他人。
  • @NH。这可能取决于您在系统上安装了哪些字体,以及可用的粗细/样式。如果您在 CSS 中声明具有不同粗细和样式(以及相同字体名称)的字体,FF 似乎可以按预期理解和应用,尽管有时它有时会以不同于其他浏览器的方式应用 faux-bold 和 faux-italic。
  • 实际上,引用列表 本身 不是正确的来源,因为它在该列表的 右上方 中说:“这些 [整数值]大致对应下面常用的权重名称”。但是,就在整数值列表的正下方,在您还引用的部分中,它显示“正常 - 与 '400' 相同”和“粗体 - 与 '700' 相同”。跨度>
【解决方案2】:

font-weight 的数字比默认的 bold 更好,因为您可以根据设计要求调整数字的 bold

查看http://www.w3.org/wiki/CSS/Properties/font-weight

【讨论】:

  • 很好。但它是否适用于所有主要浏览器的值调整?
  • 不。 Firefox 至少不支持 400 和 700 以外的粗体。
  • 在 Chrome 中,700 以下的内容不适合我。超过 700 的所有内容都与 font-weight:bold 相同。如果您的浏览器/大多数浏览器都是这种情况,您可能应该使用font-weight:bold,对吧?
  • @IamGues 当没有为weight 提供比bold(即700)重的字体时,就会发生这种情况。浏览器只是“四舍五入”到最接近的定义字体-如果您告诉浏览器font-weight: 900,但它没有找到重量为900(也不是800)的字体,但它在700中找到了,那么它显示700 一个。
  • 啊,这更有意义。谢谢@RobertKusznier
【解决方案3】:

我的基本答案与已经给出两次的相同,但参考正确:

根据 CSS 2.1 规范clause 15.6,它们在定义上是同义词。这是权威规范。

关键字“normal”与“400”同义,“bold”与“700”同义。

bold这个词让代码比700这个数字更具可读性,后者没有直观意义。在您使用数字指定字体粗细的情况下,该数字可能更适合可读性,以获取没有关键字的粗细。这种情况很少见,部分原因是大多数字体不支持400700 以外的字体粗细。

【讨论】:

  • 那么哪个更好?
  • 你问哪个是正确的。答案是两者都是正确的,并且是同义词。您还询问了使用哪一个,正确的技术答案是:您喜欢哪个。在决定您的偏好时,我给出了一些需要考虑的事项。
【解决方案4】:

在 Windows 上的某些浏览器(IE、FF)中,font-weight:800 不适用于各种 UTF-8 字体。使用font-weight: boldfont-weight: bolder ..

我在为 BBC Kyrgyz 制作东西时发现了这一点..

【讨论】:

    【解决方案5】:

    在功能上它们是相等的,但在风格上我会说选择其中一种方法并与之保持一致:要么只使用关键字,要么只使用数字标识符。这使得 CSS 代码更容易理解。

    由于字体的权重范围比 regularbold 更广泛,例如超轻书本半粗体黑色, extra black,当使用自定义字体时,通常不可能不使用数字标识符。在这些情况下,我认为最好避免使用regularbold,而是使用400700。这更加一致并且简化了对 CSS 的理解——即使是没有经验的开发人员也可以很容易地理解 400500 更薄,但是当他需要比较 regular500 时,他可能不知道哪个更薄。

    在您使用的唯一权重是regularbold 的情况下,使用关键字而不是数字标识符是完全合理且更具可读性的。但在我的工作中,这种情况几乎不会发生。

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2022-12-21
      • 2016-05-30
      • 2013-06-29
      • 1970-01-01
      • 1970-01-01
      • 2016-10-16
      • 2013-12-08
      • 2012-04-20
      相关资源
      最近更新 更多