font-weight属性通过100-900九级数值实现文字粗细分级，400为常规文本，700为加粗，支持normal、bold关键字及lighter、bolder相对值；并非所有字体均支持全部字重，需确保字体文件包含所需字重以避免浏览器fallback偏差；设计中可利用不同字重构建信息层级：h1-h6标题用600或700形成梯度，正文设400保证可读性，辅助信息用200-300营造轻盈感，关键词高亮可用500-600适度强调；为保障跨设备一致性，应选用如Inter、Roboto等多字重字体，通过@import显式加载所需wght（如200;300;400;500;600;700），避免依赖系统默认字体fallback，并权衡性能按需引入资源；合理使用font-weight可使文字呈现丰富视觉层次，提升页面可读性与设计质感。
在网页设计中，文字的视觉层次对信息传达至关重要。通过 font-weight 属性，我们可以实现字体粗细的多层级表现，增强页面可读性和设计感。CSS 中的 font-weight 不只是简单的“粗”和“细”，它支持从 100 到 900 的数值分级，每级相差 100，共九档，这为精细化排版提供了可能。
理解 font-weight 的数值分级
font-weight 可以用数字或关键字来定义：
- 100 ~ 900：以 100 为单位递增，400 等同于 normal，700 等同于 bold
- normal：等价于 400，用于常规文本
- bold：等价于 700，用于强调内容
- 还有 lighter 和 bolder，相对父元素调整粗细
并非所有字体都支持全部粗细级别。如果指定的 weight 没有对应字重，浏览器会自动选择最接近的有效值（比如 fallback 到 400 或 700），因此使用时需确保字体文件包含所需字重。
实现多层级文字表现的设计策略
合理利用不同字重，可以构建清晰的信息结构：
立即学习“前端免费学习笔记（深入）”；
- 标题（h1-h6）：使用 600 或 700 强调重要性，h1 可设为 700，h3 设为 600，形成梯度
- 正文段落：统一使用 400，保证阅读舒适性
- 辅助说明或次要信息：尝试 300 或 200（如 Thin、Light 字体可用），营造轻盈感
- 高亮关键词：在正文中将关键词设为 500 或 600，比加粗弱但又明显区别于常规文本
例如：
p { font-weight: 400; }.highlight { font-weight: 500; }
h2 { font-weight: 600; }
strong { font-weight: 700; }
确保跨设备显示一致的关键点
想让 font-weight 分级真正生效，还需注意以下几点：
- 选用支持多字重的字体：如 Google Fonts 中的 "Inter"、"Roboto"、"Open Sans" 都提供多种 weight 选项
-
显式加载所需字重：在引入字体时明确声明，例如：
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600;700&display=swap'); - 避免过度依赖 fallback：系统默认字体可能不支持细字重，导致视觉偏差
- 考虑性能与加载时间：加载多个字重会增加资源请求，建议按需引入
基本上就这些。font-weight 的细分使用，让文字不再只是“正常”和“加粗”两种状态，而是成为一种细腻的视觉语言。只要字体支持，并配合合理的样式规划，就能在界面中实现丰富而有序的文字表现。
