CSS如何设置字体粗细？CSS字体权重调整方法
2026-10-23 06:52:32
CSS设置字体粗细主要通过font-weight属性实现，以下是具体方法及常见问题排查：
一、font-weight属性核心用法font-weight用于控制文本的粗细程度，支持数字值和关键字两种形式：
数字值（100-900）以100为间隔，共9个等级，数值越大字体越粗。常见对应关系：
100：极细（Extra Light）
300：细体（Light）
400：正常（Normal，默认值）
700：粗体（Bold）
900：极粗（Extra Bold）
示例：
p { font-weight: 300; } /* 细体段落 */h1 { font-weight: 900; } /* 极粗标题 */
关键字
normal：等同于400，正常粗细。
bold：等同于700，粗体。
lighter：比父元素字体更细（若父元素为400，则显示为100）。
bolder：比父元素字体更粗（若父元素为400，则显示为700）。
示例：
<p style="font-weight: 400;"> 这是一段文字，<span style="font-weight: bolder;">这里更粗</span>。 </p>
- 数字值提供更精细的控制，但依赖字体文件是否支持对应字重。若字体仅包含normal和bold，设置300或500可能无效，浏览器会自动匹配最接近的字重。
- 关键字（如lighter/bolder）基于继承关系动态调整，适合嵌套元素场景，但同样受字体支持范围限制。
字体不支持该字重
表现：数字值或关键字无效，字体粗细无变化。
排查：
检查字体文件是否包含目标字重（如通过字体编辑工具或字体厂商文档）。
尝试更换字体（如从Arial改为Roboto）。
样式被覆盖
表现：开发者工具中font-weight属性被划掉，显示其他规则优先级更高。
排查：
使用浏览器开发者工具（F12）检查元素样式，确认是否有其他CSS规则覆盖。
提高优先级：增加选择器特异性（如从.text改为div.text）或使用!important（谨慎使用）。
继承问题
表现：子元素未正确覆盖父元素的font-weight。
排查：
检查父元素是否设置了font-weight，并确保子元素规则优先级更高。
示例：.parent { font-weight: 300; }.child { font-weight: 700 !important; } /* 强制覆盖 */
浏览器缓存
表现：修改CSS后页面未更新，字体粗细仍为旧样式。
排查：
清除浏览器缓存或强制刷新（Ctrl+Shift+R）。
检查CSS文件是否被缓存（通过开发者工具的Network面板确认）。
- 字体选择：优先使用支持多字重的字体（如Roboto、Open Sans），避免因字体限制导致效果偏差。
- 渐进增强：为不支持数字值的字体提供备用关键字（如font-weight: bold）。
- 性能考虑：避免过度使用!important，以免增加维护成本。
通过合理使用font-weight属性及排查方法，可高效实现字体粗细控制，提升页面排版质量。
热门标签
