CSS字体粗细详解与font-weight使用技巧

CSS的font-weight属性远不止“加粗”与“正常”的简单二分，它通过100–900九级数值实现精细的字体粗细控制，配合normal、bold及lighter/bolder等关键字，为网页文字构建丰富而有序的视觉层次；但真正发挥其潜力的关键在于：选用Inter、Roboto等原生支持多字重的字体，显式加载所需wght值（如200;400;600;700），并结合设计逻辑——标题用600–700形成梯度、正文坚守400保障可读性、辅助信息采用200–300营造轻盈感、关键词以500–600适度强调——从而在提升信息传达效率的同时，显著增强界面的专业质感与跨设备一致性。

在网页设计中，文字的视觉层次对信息传达至关重要。通过 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，比加粗弱但又明显区别于常规文本

例如：

确保跨设备显示一致的关键点

想让 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 的细分使用，让文字不再只是“正常”和“加粗”两种状态，而是成为一种细腻的视觉语言。只要字体支持，并配合合理的样式规划，就能在界面中实现丰富而有序的文字表现。

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~