1. font-weight 的基础能力与场景
1.1 font-weight 的取值与语义
在 CSS 中，font-weight 属性控制文本的粗细，常见取值包括 normal、bold，以及数值范围 100 到 900（每 100 增幅一次），这为文本的视觉层级提供了量化的基础。
不同字体家族对权重的实际渲染存在差异，同一个数值在不同字体中呈现的粗细可能不同，因此要结合字体家族的实际权重来设计并实现多层级文字表现。
作为多层级文字表现的核心之一，font-weight 与字号、行高、字距共同构成视觉层级，需要在设计时为不同元素设定清晰的权重映射。
1.2 设计系统中的权重设计原则
在大型设计系统里，为不同语义层级分配固定的 font-weight，比如正文 400、段落标题 600、重要提示 700，将视觉层级从肉眼感知的粗细统一起来。
可维护性：通过 CSS 变量或 tokens 将权重集中管理，便于跨页面复用。
可访问性：适当的权重分配应兼顾对比度与阅读性，确保在不同设备上都能保持清晰度。
2. 字体家族对权重的支持与兼容性
2.1 字体族的权重覆盖与实际渲染
并非所有字体族都实现了 100-900 的完整权重，部分常用字体只有 400 与 700，这就需要在设计时了解所用字体的实际可用权重。
当使用 webfont 或字体服务器加载字体时，尽量加载常用的中间权重，以提高视觉层级的可用性。
如果需要更细的控制，可以考虑 变量字体，通过一个轴（如 wght）实现连续权重调节，使多层级文字表现更加平滑。
2.2 兼容性与降级策略
在旧浏览器或不支持变量字体的环境中，必须提供明确的回退权重，确保文本仍然有清晰的层级。
使用 @font-face 加载自定义字体时，通过 font-weight: 100 900; 指定可用权重范围，并提供回退字体族以保证降级可用性。
@font-face {font-family: 'DemoVar';src: url('/fonts/DemoVar.woff2') format('woff2');font-weight: 100 900;font-style: normal;font-display: swap;
}body {font-family: 'DemoVar', Inter, system-ui, -apple-system, 'Segoe UI', Roboto;font-weight: 400;
}
通过上述做法可以在不牺牲可访问性的前提下保持多层级权重的兼容性，并为后续的风格迭代打下基础。
3. 实战技巧：在设计系统中建立权重等级
3.1 为标题、正文、元数据分配固定权重
在实际设计系统中，为不同语义元素设定固定的 font-weight可以让视觉层级更加稳定，尤其是在跨页、跨模块的情况下更加一致。
例如，标题通常选用较高权重以凸显层级，正文保持中等权重以提升阅读性，元数据如日期或辅助文本可用较低权重来降低干扰。
通过这样的分配，团队成员在无须重复判断的情况下就能快速搭建页面结构，提高协作效率并确保风格一致性。
3.2 基于 CSS 变量的统一权重命名与映射
使用 CSS 变量可以把权重映射成可复用的 tokens，实现跨组件的一致性，同时便于后续的主题切换。
通过将不同语义等级映射到变量，如 --weight-display-1、--weight-body、--weight-meta，可以实现清晰的命名约定与快速复用。
:root {--weight-display-1: 700;--weight-display-2: 600;--weight-body: 400;--weight-meta: 500;
}
h1, h2 { font-weight: var(--weight-display-1); }
p { font-weight: var(--weight-body); }
small, .muted { font-weight: var(--weight-meta); }
此方法的核心在于把权重作为可变组件属性来管理，使页面结构与样式决策分离，便于主题化与迭代。
4. 案例分析：实用代码示例
4.1 纯 CSS 做出九段文字权重的实战案例
如果需要对文字进行更细的权重区分，可以通过自定义的 CSS 变量来模拟九段权重，并在设计系统中固定对应关系。
在没有可变字体的情况下，这种方法仍然能显著提升层级清晰度，确保不同文本块之间的对比度与可读性。
:root {--weight-100: 100;--weight-200: 200;--weight-300: 300;--weight-400: 400;--weight-500: 500;--weight-600: 600;--weight-700: 700;--weight-800: 800;--weight-900: 900;
}
h1 { font-weight: var(--weight-700); }
h2 { font-weight: var(--weight-600); }
h3 { font-weight: var(--weight-500); }
p { font-weight: var(--weight-400); }
.small { font-weight: var(--weight-300); }
通过这种九级权重的映射，视觉层级变得更加细腻、可控，有助于在设计系统中维持一致的风格语言。
4.2 结合可变字体的进阶案例
若引入可变字体，可以利用单一字体文件实现全量权重，进一步提升灵活性和加载效率。
在可变字体场景下，font-variation-settings 与变量轴搭配使用，可以实现更平滑的权重变化与过渡效果。
@font-face {font-family: 'InterVar';src: url('/fonts/Inter-Var.woff2') format('woff2');font-weight: 100 900;font-style: normal;font-display: swap;
}
:root {--wght: 400;
}
body {font-family: 'InterVar', system-ui, sans-serif;font-variation-settings: 'wght' var(--wght);
}
h1 { font-weight: 900; } /* 作为最高权重的示例，确保兼容性与回退 */
h2 { font-weight: 700; }
p { font-weight: 400; }
