font-weight属性用于控制文本粗细，支持normal、bold及100-900数字值；其生效依赖字体是否包含对应字重，否则会就近回退；可通过@font-face引入多字重字体或使用可变字体实现精细控制；实际项目中推荐结合CSS变量管理字重，提升维护性与一致性。
在CSS中，我们主要通过
font-weight属性来精确控制文本的粗细。它允许我们为字体设置从细到粗的不同视觉表现，是网页排版中一个非常基础但又至关重要的工具。
解决方案
font-weight属性是CSS中用来定义字体粗细的核心手段。它接受多种值，每种值都有其特定的含义和效果。
最常见的几种值包括：
normal
：这是默认的字体粗细，通常对应于数字值400
。bold
：表示粗体，通常对应于数字值700
。lighter
：相对于父元素的字体粗细，使字体更细。bolder
：相对于父元素的字体粗细，使字体更粗。- 数字值（100到900，以100为增量）：这些数字值提供了更精细的控制。
100
是最细的，900
是最粗的。例如，font-weight: 300;
通常表示“细体”，font-weight: 600;
则表示“半粗体”。
这些数字值并非凭空出现，它们背后对应的是字体设计者在制作字体时预设的各种字重。浏览器会尝试匹配最接近的可用字重。
立即学习“前端免费学习笔记（深入）”；
/* 示例 */
p {
font-weight: normal; /* 默认粗细 */
}
h1 {
font-weight: bold; /* 粗体 */
}
.light-text {
font-weight: 300; /* 细体 */
}
.semi-bold {
font-weight: 600; /* 半粗体 */
}为什么我设置的font-weight
数字值有时不生效？
这其实是一个挺常见的“坑”，很多初学者都遇到过。当你尝试设置
font-weight: 300或者
500这样的数字值，却发现文本看起来和
normal（400）没什么区别，或者干脆就直接显示成了
bold（700），这通常不是CSS的问题，而是你当前使用的字体本身就没有提供你想要的那个字重。
字体文件在设计时，并不会包含从100到900的所有字重。很多字体可能只提供了
Regular（通常是400）和
bold（通常是700）这两个最基本的字重。如果你设置了一个字体没有的字重，比如
font-weight: 300，浏览器会怎么处理呢？它会尝试寻找最接近的可用字重。如果300没有，它可能会回退到400（
normal）。同理，如果你设置了
font-weight: 600，而字体只有400和700，它可能会选择700来显示，因为700是比600更粗的下一个可用字重。
解决这个问题的关键在于了解你所使用的字体。
-
检查字体文件： 如果你使用的是自定义字体（通过
@font-face
引入），你需要确保你加载了包含所需字重的文件。例如，如果你想用font-weight: 300
，那么你需要引入一个名为YourFont-Light.woff2
或类似的文件，并在@font-face
规则中明确声明它的font-weight
是300
。@font-face { font-family: 'MyCustomFont'; src: url('fonts/MyCustomFont-Light.woff2') format('woff2'); font-weight: 300; /* 明确声明这个文件对应的字重 */ font-style: normal; } @font-face { font-family: 'MyCustomFont'; src: url('fonts/MyCustomFont-Regular.woff2') format('woff2'); font-weight: 400; /* 默认字重 */ font-style: normal; } /* ... 其他字重文件 ... */ body { font-family: 'MyCustomFont', sans-serif; font-weight: 300; /* 现在这个300才可能生效 */ } 使用系统字体： 对于系统字体（如 Arial, Helvetica, Microsoft YaHei），它们通常只提供有限的字重。如果你需要更丰富的字重选择，考虑使用Google Fonts或Adobe Fonts等服务，它们提供了大量拥有多字重的字体。
了解字体设计： 有些字体天生就没有很细的字重，比如一些手写体或艺术字体。在这种情况下，即使你设置了
font-weight: 100
，也可能无法达到你期望的视觉效果。
所以，当
font-weight不生效时，别急着怀疑CSS，先去看看你的字体是不是“有料”。
除了font-weight
，还有其他视觉上加粗或变细字体的方法吗？
当然有，虽然
font-weight是标准且最推荐的方式，但在某些特定场景下，我们可能会用到一些“视觉欺骗”或者更前沿的技术来达到类似的效果。
-
text-shadow
的妙用： 给文本添加一个与文本颜色相同、偏移量极小（甚至为0）的text-shadow
，可以模拟出字体加粗的效果，尤其对于那些本身没有粗体字重的字体，或者当你需要一个介于现有字重之间的“微粗”效果时。.faux-bold { font-weight: normal; /* 保持正常字重 */ color: #333; text-shadow: 0.5px 0 0 #333; /* 向右偏移0.5px，颜色相同 */ /* 也可以是多个阴影叠加，增强效果 */ /* text-shadow: 0.5px 0 0 #333, -0.5px 0 0 #333; */ } .faux-thinner { /* 这种方法更多用于加粗，变细比较难通过阴影实现， 除非是背景色阴影，但效果不自然 */ }这种方法的好处是灵活，但缺点是可能会让文本边缘显得不那么锐利，或者在某些浏览器下渲染效果不一致。
CSS
transform: scale()
（不推荐直接用于字重）： 虽然transform: scale()
可以放大元素，但它会等比例放大整个文本框，而不是仅仅改变字重。它会使得字母本身变得更大，而不是更粗，所以通常不用于模拟字重。如果只是为了让文字看起来更“重”，那不如直接调整font-size
。-
Variable Fonts (可变字体) 和
font-variation-settings
： 这是现代Web排版的一个大趋势，也是最优雅、最强大的非font-weight
控制字重的方式。可变字体是一个单一的字体文件，但它包含了多个设计轴（如字重、字宽、斜度等）的变体。通过CSS的font-variation-settings
属性，我们可以精确地控制这些轴的值，从而实现传统字体无法比拟的精细度。/* 假设你引入了一个支持 'wght' 轴的可变字体 */ @font-face { font-family: 'MyVariableFont'; src: url('fonts/MyVariableFont.woff2') format('woff2'); /* 声明字体支持的字重范围，例如从100到900 */ font-weight: 100 900; font-style: normal; } .super-fine { font-family: 'MyVariableFont', sans-serif; font-variation-settings: 'wght' 150; /* 设置字重到150，非常精细 */ } .extra-bold { font-family: 'MyVariableFont', sans-serif; font-variation-settings: 'wght' 850; /* 设置字重到850 */ }使用可变字体，你甚至可以设置
font-weight: 543
这样的非整百值，如果字体支持，它就会以这个精确的字重渲染。这是目前实现字体精细控制的最佳实践，但需要字体本身是可变字体。
在实际项目中，我们该如何选择font-weight
的数值和关键词？
在实际的Web项目中，选择
font-weight的值需要兼顾设计需求、字体可用性、可维护性和性能。
优先使用语义化关键词 (
normal
,bold
) 进行基本设置： 对于大部分的文本，如段落（p
）、列表项（li
），通常使用font-weight: normal;
。对于标题（h1
-h6
）或需要强调的文本，font-weight: bold;
是一个快速且兼容性好的选择。这种方式简单直观，浏览器会根据当前字体自动选择最合适的粗体或正常体。当设计有明确的字重需求时，使用数字值： 如果你的设计稿明确指定了某个文本需要
300
（细体）、500
（中等粗细）或600
（半粗体）等特定字重，那么就应该使用对应的数字值。但前提是你所使用的字体必须提供这些字重。在我看来，这是项目中最常见也最容易踩坑的地方。所以，在项目初期选择字体时，就要考虑它是否提供了足够的字重变体。-
利用CSS变量（Custom Properties）进行字重管理： 为了提高代码的可维护性和一致性，我强烈建议在项目中定义一套字体粗细的CSS变量。这样，设计师如果需要调整某个字重，你只需要修改一处变量定义，而不是去查找和替换所有使用该字重的地方。
:root { --font-weight-light: 300; --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --font-weight-extrabold: 800; } h1 { font-weight: var(--font-weight-bold); } .subtitle { font-weight: var(--font-weight-medium); } .body-text { font-weight: var(--font-weight-regular); }这种做法不仅让代码更清晰，也为响应式设计提供了便利，你可以通过媒体查询来调整这些变量的值，从而在不同屏幕尺寸下调整字重。
考虑性能： 每引入一个字重的字体文件，都会增加页面的加载时间。所以，在选择字重时，要有所取舍，只加载那些你实际会用到的字重。例如，如果你的设计中只用到了
300
、400
和700
这三种字重，那就只加载这三个字重的文件，而不是把字体家族提供的所有字重都加载进来。对于可变字体，虽然它是一个文件，但通常比加载多个独立字重文件更高效。
总结一下，
font-weight的选择既要遵循设计规范，也要尊重字体本身的限制，并结合现代CSS特性来优化管理。
