你知道字体所拥有的字重的数量和font-weight的数值字重是什么对应关系吗？

在 Web 开发中，字体的字重（font weight）是一个重要的属性，影响着文本的视觉效果和可读性。font-weight 属性可以用来设置字体的字重，通常有数值和关键字两种形式。了解它们之间的对应关系，可以帮助我们更好地使用字体。

字体的字重种类

字体的字重通常分为以下几类：

1. 超细（Hairline） - 100
2. 细（Thin） - 200
3. 轻（Light） - 300
4. 正常（Regular） - 400
5. 中等（Medium） - 500
6. 粗（Bold） - 700
7. 超粗（Black） - 900

font-weight 数值和关键字的对应关系

字重描述	数值	对应关键字
超细	100	Thin
细	200	Extra Light
轻	300	Light
正常	400	Normal / Regular
中等	500	Medium
粗	700	Bold
超粗	800	Extra Bold
黑体	900	Black

CSS 示例

在 CSS 中，您可以直接使用关键字或数值来设置字体的字重。例如：

/* 使用关键字 */
.font-normal {
    font-weight: normal; /* 400 */
}

.font-bold {
    font-weight: bold; /* 700 */
}

/* 使用数值 */
.font-light {
    font-weight: 300;
}

.font-black {
    font-weight: 900;
}

注意事项

1. 可用的字重：并不是所有字体都支持所有的字重。具体支持的字重取决于所使用的字体。使用不支持的字重时，浏览器会选择最接近的字重。
2. 字体文件：确保加载的字体文件包含了所需的字重。如果字体文件中只包含常规和粗体，使用其他字重可能不会生效。
3. 跨浏览器兼容性：大多数现代浏览器都支持 font-weight 的关键字和数值，但在某些老旧浏览器中可能存在兼容性问题。

小结

了解字体字重的数量和 font-weight 的数值对应关系是设计和开发过程中不可或缺的一部分。通过合理的使用字体字重，不仅可以提升文本的可读性，还能增强页面的视觉美感。通过选择合适的字重，开发者可以更好地实现设计意图，提升用户体验。