css 加粗（手把手讲解）

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

• 新项目:《从零手撸：仿小红书（微服务架构）》 正在持续爆肝中，基于 Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 ;演示链接： http://116.62.199.48:7070 ;
• 《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接： http://116.62.199.48/ ;

截止目前， 星球 内专栏累计输出 90w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 3100+ 小伙伴加入学习 ，欢迎点击围观

在网页设计与前端开发中，文字的视觉表现力直接影响用户的阅读体验和信息传达效率。CSS 加粗作为基础且高频使用的样式效果，既是文字排版的核心工具，也是开发者需要掌握的核心技能之一。无论是标注重点内容、区分导航层级，还是增强数据的可读性，CSS 加粗都能通过简单的代码实现显著的视觉效果。然而，许多开发者可能仅停留在基础用法层面，忽略了其背后的原理、不同方法的适用场景，以及潜在的兼容性问题。本文将系统性地解析 CSS 加粗的实现方式，从基础语法到进阶技巧，结合实际案例，帮助读者全面掌握这一技能。

基础语法解析：font-weight 的核心作用

1. font-weight 的基本用法

CSS 加粗最直接的方式是通过 font-weight 属性。它的核心功能是定义文字的粗细程度，而“加粗”通常对应 bold 或数值 700。

/* 基础语法示例 */
p.important {
  font-weight: bold; /* 或 font-weight: 700; */
  color: #333;
}

关键点解析

• 数值范围：font-weight 接受 normal（默认）、bold、bolder、lighter 或 100 到 900 的数值。数值每增加 100，粗细程度递增，例如 400 是标准粗细，700 是加粗，900 是极粗。
• 字体支持：加粗效果依赖字体文件本身是否包含对应的粗细版本。例如，若字体仅提供 400 的标准粗细，设置 700 可能会触发浏览器的模拟加粗（可能影响视觉效果）。

比喻：可以将字体的粗细层级想象为“衣服的厚度”。normal 是日常穿着，bold 是加厚外套，而 900 则像是叠加多层保暖衣物——但若字体本身没有“厚外套”，系统只能强行“缝制”，效果可能不自然。

2. HTML 标签与 CSS 的协同：<b> vs <strong>

HTML 提供了 <b> 和 <strong> 标签直接实现加粗效果，但它们与 CSS 的结合需注意语义差异：

• <b> 标签：纯视觉效果，表示“无特殊含义的加粗”。
• <strong> 标签：语义化强调，表示“重要内容”，浏览器默认会应用 font-weight: bold。

<!-- HTML 示例 -->
<p>常规文本，<b>使用 <b> 标签加粗</b>，<strong>而 <strong> 标签同时强调语义</strong>。</p>

CSS 扩展：可以通过覆盖默认样式，让 <b> 或 <strong> 的加粗效果更灵活：

/* 自定义加粗样式 */
b {
  font-weight: 900;
  color: #ff6b6b;
}

strong {
  font-weight: 700;
  text-decoration: underline;
}

进阶技巧与注意事项

1. 处理字体不支持加粗的场景

若目标字体不包含 700 的粗细版本，CSS 可通过以下方式优化：

• 指定备用字体：在 font-family 中按优先级列出包含加粗版本的字体：

  body {
    font-family: 'Roboto Bold', 'Arial Bold', sans-serif;  
  }
  

• 模拟加粗效果：通过 text-shadow 或 font-variation-settings 创造视觉加粗：

  .fake-bold {
    text-shadow: 1px 0 0 #000, -1px 0 0 #000; /* 通过阴影模拟加粗 */
  }
  

2. 动态加粗：结合 CSS 变量与 JavaScript

通过 CSS 变量和事件监听，可以实现交互式加粗效果。例如，点击按钮切换文字粗细：

<!-- HTML 结构 -->
<button id="toggleBold">切换加粗</button>
<p class="dynamic-text">这是一个动态加粗的文本示例</p>

/* CSS 变量定义 */
:root {
  --font-weight: 400;
}

.dynamic-text {
  font-weight: var(--font-weight);
}

// JavaScript 逻辑
document.getElementById('toggleBold').addEventListener('click', () => {
  const currentWeight = getComputedStyle(document.documentElement).getPropertyValue('--font-weight');
  document.documentElement.style.setProperty('--font-weight', currentWeight === '400' ? '700' : '400');
});

3. 伪元素与加粗的创意组合

利用 ::before 或 ::after 伪元素，可以实现更复杂的加粗效果，例如：

• 文字高光：在文字下方叠加半透明的加粗层：

  .highlight {
    position: relative;
    font-weight: 400;
    color: #000;
  }
  
  .highlight::before {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    font-weight: 900;
    color: rgba(255, 107, 107, 0.5);
    z-index: -1;
  }
  

<!-- HTML 使用 -->
<span class="highlight" data-text="重点内容">重点内容</span>

实际应用场景与案例分析

1. 导航栏的选中状态

在导航菜单中，可以通过 font-weight 区分当前激活的链接：

/* 导航栏样式 */
nav a {
  padding: 12px 20px;
  font-weight: 500;
  transition: all 0.3s ease;
}

nav a.active {
  font-weight: 700;
  color: #4a90e2;
}

效果：鼠标悬停或选中时，链接文字变粗，结合颜色变化强化视觉反馈。

2. 数据可视化的数值突出

在表格或统计图表中，用加粗标注关键数值：

<table>
  <tr>
    <th>项目</th>
    <th>销售额</th>
  </tr>
  <tr>
    <td>产品A</td>
    <td class="highlight-value">¥ 500,000</td>
  </tr>
</table>

.highlight-value {
  font-weight: 700;
  color: #2ecc71;
}

3. 表单必填项提示

通过加粗和颜色组合，明确表单的必填字段：

<label>
  姓名 <span class="required">*</span>
  <input type="text" required>
</label>

.required {
  font-weight: 700;
  color: #e74c3c;
  margin-left: 2px;
}

注意事项与最佳实践

1. 字体兼容性检查

• 使用 @font-face 自定义字体时，需确保加载对应粗细的字体文件：

  @font-face {
    font-family: 'MyCustomFont';
    src: url('MyCustomFont-Bold.woff2') format('woff2');
    font-weight: 700;
  }
  

2. 性能优化

• 避免对大量文字频繁切换加粗，可能影响渲染性能。
• 对于长文本，优先使用 font-weight: 500 等适度粗细，而非极端值（如 900）。

3. 可访问性（Accessibility）

• 语义化优先：对需要强调的内容，使用 <strong> 标签而非纯 CSS，以确保屏幕阅读器正确识别优先级。
• 对比度检查：加粗文字的颜色与背景的对比度应符合 WCAG 标准（如 AAA 级要求至少 7:1）。

结论

CSS 加粗看似简单，实则涵盖从基础语法到复杂交互的多层次应用。通过本文的解析，读者不仅能掌握 font-weight 的核心用法，还能了解如何结合伪元素、变量和语义化标签实现更丰富的效果。在实际开发中，需注意字体兼容性、性能优化及可访问性，以确保加粗效果既美观又实用。随着 CSS 新特性（如 font-variation-settings）的普及，开发者可以进一步探索更灵活的文字样式控制，让 CSS 加粗 成为提升用户体验的关键工具。

未来，随着自适应字体（Variable Fonts）的普及，开发者甚至能通过单一字体文件动态调整粗细，彻底解决字体支持问题。掌握这些技能，将帮助你从容应对各类排版挑战，为用户提供更优质的内容呈现体验。