CSS中的font-weight属性：字体粗细的秘密
引言
大家好，欢迎来到今天的CSS讲座！今天我们要聊的是一个看似简单、但其实有很多小秘密的属性——font-weight。你可能会想：“不就是控制字体粗细嘛，有什么好说的？”别急，等我慢慢道来，你会发现这个属性背后有不少有趣的故事。
在CSS的世界里，font-weight是用来控制文本的粗细程度的。它不仅仅是一个简单的“加粗”或“变细”的开关，而是有着丰富的层次和细节。接下来，我们将会深入探讨它的用法、常见问题以及一些有趣的技巧。
1. font-weight的基本用法
首先，让我们来看看font-weight最基础的用法。它的值可以是数字（从100到900）或者关键字（如normal、bold）。数字越大，字体越粗；关键字则提供了一些常见的粗细选项。
1.1 数字值
font-weight的数字值范围是从100到900，以100为单位递增。理论上，每个字体都应该支持这9个级别的粗细，但实际上，很多字体并没有这么多的变体。常见的字体通常只提供3-5种粗细级别。
p {
font-weight: 400; /* 默认粗细 */
}
h1 {
font-weight: 700; /* 较粗 */
}
strong {
font-weight: 900; /* 最粗 */
}1.2 关键字值
除了数字，font-weight还可以使用关键字来设置字体粗细。以下是常用的关键字及其对应的数值：
| 关键字 | 数值 |
|---|---|
normal |
400 |
bold |
700 |
bolder |
相对于父元素更粗 |
lighter |
相对于父元素更细 |
p {
font-weight: normal; /* 等同于 400 */
}
h1 {
font-weight: bold; /* 等同于 700 */
}
span {
font-weight: bolder; /* 比父元素更粗 */
}
em {
font-weight: lighter; /* 比父元素更细 */
}2. 字体粗细的继承性
font-weight是继承属性，这意味着子元素会继承父元素的字体粗细设置。如果你希望某个元素的字体比父元素更粗或更细，可以使用bolder和lighter关键字。
<div style="font-weight: 400;">
这是默认粗细。
<span style="font-weight: bolder;">这是更粗的字体。</span>
</div>在这个例子中，<span>元素的字体粗细会比<div>更粗。具体粗多少取决于浏览器和字体的支持情况。
3. 字体粗细的局限性
虽然font-weight看起来功能强大，但它也有一些局限性。并不是所有的字体都支持所有的粗细级别。实际上，很多字体只提供了有限的几种粗细变体。例如，Google Fonts中的许多字体只提供400（正常）和700（加粗）两种粗细。
如果你指定了一个字体不支持的粗细级别，浏览器会自动选择最接近的可用粗细。比如，如果你设置了font-weight: 600，但字体只支持400和700，浏览器会选择700。
/* 如果字体只支持 400 和 700，600 会被自动调整为 700 */
p {
font-weight: 600;
}3.1 使用@font-face自定义字体
如果你对字体的粗细有更高的要求，可以考虑使用@font-face来自定义字体，并加载不同粗细的字体文件。这样可以确保你的页面能够显示你想要的字体粗细。
@font-face {
font-family: 'MyCustomFont';
src: url('my-font-normal.woff2') format('woff2');
font-weight: 400;
}
@font-face {
font-family: 'MyCustomFont';
src: url('my-font-bold.woff2') format('woff2');
font-weight: 700;
}
body {
font-family: 'MyCustomFont', sans-serif;
}
h1 {
font-weight: 700;
}通过这种方式，你可以为不同的粗细级别加载不同的字体文件，确保页面上的字体显示效果一致。
4. font-weight与font-stretch的区别
有时候，开发者会混淆font-weight和font-stretch这两个属性。它们虽然都与字体的外观有关，但作用完全不同。
font-weight控制字体的粗细，影响的是笔画的厚度。font-stretch控制字体的宽度，影响的是字符的宽窄。
p {
font-weight: 700; /* 控制粗细 */
font-stretch: condensed; /* 控制宽度 */
}font-stretch的值可以是ultra-condensed、extra-condensed、condensed、semi-condensed、normal、semi-expanded、expanded、extra-expanded和ultra-expanded。这些值会影响字体的宽度，但不会改变字体的粗细。
5. font-weight的浏览器兼容性
好消息是，font-weight在所有现代浏览器中都有很好的兼容性。即使是IE8也支持font-weight的基本用法（尽管它不支持bolder和lighter关键字）。不过，如果你需要支持非常古老的浏览器，建议使用normal和bold这样的基本值。
/* 兼容性更好的写法 */
p {
font-weight: normal;
}
h1 {
font-weight: bold;
}6. 实战技巧：如何优雅地处理字体粗细
在实际项目中，处理字体粗细时有一些小技巧可以帮助你写出更优雅的CSS代码。
6.1 使用变量
如果你的项目中有多个地方需要使用相同的字体粗细，可以考虑使用CSS变量来简化代码。
:root {
--font-weight-normal: 400;
--font-weight-bold: 700;
}
p {
font-weight: var(--font-weight-normal);
}
h1 {
font-weight: var(--font-weight-bold);
}这样做的好处是，如果你以后需要调整字体粗细，只需要修改变量的值，而不需要逐一修改每个元素的样式。
6.2 结合媒体查询
在响应式设计中，字体粗细也可以根据屏幕大小进行调整。例如，在移动设备上，你可能希望字体稍微细一些，而在桌面设备上，字体可以更粗一些。
@media (max-width: 768px) {
h1 {
font-weight: 500;
}
}
@media (min-width: 769px) {
h1 {
font-weight: 700;
}
}7. 总结
好了，今天的讲座就到这里了！通过这次学习，我们了解了font-weight的多种用法，包括数字值和关键字值的区别，字体粗细的继承性，以及如何通过@font-face自定义字体粗细。我们还探讨了font-weight与font-stretch的区别，并分享了一些实战技巧。
希望今天的讲解能帮助你在未来的项目中更好地使用font-weight，让字体的粗细变化更加灵活和美观。如果有任何问题，欢迎在评论区留言讨论！
谢谢大家的聆听，我们下次再见！
