如何用CSS设置字体粗细？

在HTML和CSS中设置字体粗细程度主要通过CSS的font-weight属性实现，它直接影响文本的视觉层次和可读性，以下为详细指南：

核心属性：font-weight

作用：控制文本粗细，值范围包括关键字和数值单位：

p {
  font-weight: bold;       /* 关键字-常用值 */
  font-weight: 700;        /* 数值-推荐方式 */
}

属性值详解

1. 关键字值（共9种）：

   • normal：默认值（等效于400）
   • bold：加粗（等效于700）
   • lighter：比父元素更细
   • bolder：比父元素更粗
   • 其他相对值：thin/extra-light/light/medium/semi-bold/extra-bold/black
     注：部分关键字需字体文件支持

2. 数值值（推荐使用）：

   • 范围：100 ~ 900（整百递进）
   • 常用值：
     • 400 = normal
     • 700 = bold
   • 示例：font-weight: 600;（中等加粗）

实际应用场景

1. 全局基础设置：

   body {
     font-weight: 400; /* 默认正常粗细 */
   }
   ```加粗**：
   ```css
   h1 {
     font-weight: 700; /* 强视觉层次 */
   }

2. 特定元素强调：

   .important {
     font-weight: 800; /* 超粗强调 */
   }

常见问题与解决方案

1. 字体不支持指定字重：

   • 现象：设置font-weight: 300;但渲染为默认粗细
   • 解决：

     @font-face {
       font-family: "CustomFont";
       src: url("light.woff2") format("woff2");
       font-weight: 300; /* 明确定义字重 */
     }
     body {
       font-family: "CustomFont", sans-serif;
       font-weight: 300; /* 启用轻量字重 */
     }

2. bolder/lighter不生效：

   • 原因：父元素未明确定义字重
   • 修正：

     .parent {
       font-weight: 400; /* 明确父元素字重 */
     }
     .child {
       font-weight: bolder; /* 此时生效为700 */
     }

最佳实践

1. 优先使用数值：避免bold等关键字的浏览器差异
2. 字体家族兼容：

   font-family: "Helvetica Neue", Arial, sans-serif; /* 备选通用字体 */

3. 响应式适配：

   @media (max-width: 768px) {
     h1 {
       font-weight: 600; /* 小屏幕降低加粗程度 */
     }
   }

4. 可访问性：
   • WCAG标准建议：正文文本字重不低于400
   • 避免超细字体（<300）用于长文本

浏览器支持说明

• 所有现代浏览器均支持font-weight
• IE8+支持数值单位，IE7需使用关键字
• 移动端兼容性：Android 4.4+ / iOS 5.1+ 全支持

引用说明参考MDN Web文档关于font-weight的权威指南，遵循W3C CSS Fonts Module Level 4规范，并结合WebAIM可访问性实践建议。