CSS字体粗细属性的值是如何工作的？

Question

我不理解字重值。当我将其更改为粗体，正常或600+时，也会更改字体。但将其更改为100至500时，没有任何变化。这些值存在的意义是什么？

- regxcode

---

你的字体必须支持不同的字重。 - Blender

与浏览器或字体相关吗？ - regxcode

有时字体设计师选择创建100、200、300等权重的字体。而其他时候，他们只制作一两种权重。如果你使用了实际上不存在的权重，浏览器会选择最接近的有效权重。 - Blender

好的，这对双方都有关。谢谢。 - regxcode

Answer 1

font-weight 属性的值从 100 到 900，反映了设计字体不同粗细程度的排版惯例。很少有字体包含所有这些权重，但该比例尽可能地选取以涵盖使用的不同权重。CSS3 字体草案描述了数字与传统排版术语（如 Thin、Extra Light 等）之间的 对应关系 ，但术语确实因人而异。

在排版学中，每个字重是由排版师设计的单独字体。这是为什么大多数字体只有两种或者只有一种字重的一个原因：设计字体需要时间，而时间就是金钱。特别适用于网页字体的另一个原因是显示设备通常比较粗糙，使得精细排版经常是一次毫无意义的尝试。特别是，小字高在低分辨率设备上效果不佳。

CSS 规范定义了一种映射声明字体字重到可用字重的算法。例如，当只有字重 400 和 700 可用时（通常情况），那么字重 100、200 和 300 被映射到 400。

然而，在某些情况下，浏览器会算法地加粗字形。这比解决方案更像一个问题，由于浏览器差异，如果请求不存在的字重，可能会导致奇怪的情况。大多数浏览器似乎在请求 600 或更高的字重时使用算法加粗，且该字体仅具有正常（400）字重。例如，在 Arial Unicode MS 中设置文本时将 font-weight: bold 创建了 Arial Unicode MS 的人工加粗版本。（Arial Unicode MS 没有加粗字体）

常见字体还存在其他问题。有时需要将字体名称用作字体名，例如，font-family: Arial Black 而不是逻辑设置 font-family: Arial; font-weight: 900。但是，在一些浏览器上，只有逻辑方式可行。

通常情况下，除非您使用可下载的字体（Web 字体）通过 @font-face 控制字体粗细问题，否则不要尝试使用正常和粗体以外的其他字重。大多数可用于下载的字体仅包含两种基本字重，或者只有一种，但是还有一些有趣的免费字体具有几种不同的字重。

- Jukka K. Korpela

Answer 2

font-weight属性可以改变字体的粗细。

通常适用于所有浏览器。

font-weight:bold;

正常工作。

100-500字重不加粗字体，因为其加粗百分比小于50％。

浏览器会自动将其更改为普通字体而不是加粗。

- user1972007

Answer 3

font-weight 设置你希望浏览器呈现的字体的期望粗细。通常，相同字体的不同粗细实际上是不同的字体（比如考虑 Arial 和 Arial Black），浏览器甚至可能为更粗的字体样式替代另一种字体系列。浏览器也不一定有所有字体以及所有重量的字体可用，因此某些 font-family/font-weight 组合可能没有任何效果。

浏览器和 CSS 并不是一个排版系统。你不能保证所请求的样式会被完全按照你的要求呈现。如果你想更好地控制你的字体，请考虑使用 @font-face 声明。

- lanzz

Answer 4

基本上，如果指定的字重字体不存在，则会被最接近的可用字重字体替换。这就是为什么您看不到任何更改的原因。

请注意，400是正常字重，700是粗体，大多数网络字体没有比这更多的字重。因此，在CSS中指定字重时，95％的时间可以使用“bold”和“normal”。

- Jean

---

这可能与主题/单词的重要性有关吗？例如，在HTML中，<b></b>标记仅使文本加粗，但<strong></strong>标记用于重要关键字。这是否与此有关？ - regxcode

@regxcode，不，从CSS的角度来看，b和strong元素具有相同的默认效果。 - Jukka K. Korpela