使用 font-weight 属性
这是最直接、最标准的方法。font-weight 属性用于定义字体的粗细程度。
（图片来源网络，侵删）
使用标准数值
font-weight 接受从 1 到 1000 的数值（以100为增量），数值越大，字体越粗。
400通常等同于normal（正常粗细）。700通常等同于bold（粗体）。
示例代码：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">字体粗细示例</title>
<style>
body {
font-family: "Microsoft YaHei", sans-serif; /* 设置一个常见的中文字体 */
font-size: 20px;
}
p {
margin-bottom: 10px;
}
.normal {
font-weight: 400; /* 正常粗细 */
}
.bolder {
font-weight: 700; /* 粗体 */
}
.extra-bold {
font-weight: 900; /* 特粗体 */
}
</style>
</head>
<body>
<p class="normal">这是正常粗细的文字 (font-weight: 400)。</p>
<p class="bolder">这是加粗的文字 (font-weight: 700)。</p>
<p class="extra-bold">这是特粗的文字 (font-weight: 900)。</p>
</body>
</html>
使用关键字
除了数值,font-weight 还支持一些关键字，它们更易于理解和记忆。
normal: 默认值，等同于400。bold: 粗体，等同于700。bolder: 比父元素更粗，如果父元素已经是900，则bolder可能没有效果。lighter: 比父元素更细。
示例代码：
（图片来源网络，侵删）
p {
font-weight: normal; /* 正常 */
}
strong {
font-weight: bold; /* 加粗 */
}
⚠️ 重要提醒：字体文件的限制
这是理解“增发”字体时最关键的一点。
不是所有字体都能无限加粗！
字体的粗细程度取决于您所使用的字体文件本身。
-
系统默认字体 (如 "Microsoft YaHei", "SimSun", "Arial", "Times New Roman")：
（图片来源网络，侵删）- 这些字体通常只提供有限的几个“字重”（Font Weight），
normal(400) 和bold(700)。 - 如果您尝试设置一个字体文件不支持的数值（
font-weight: 500），浏览器会自动回退（Fallback）到最接近的可支持字重。 通常是400或700。 - 这就是为什么有时候你设置了
500，但看起来和400没有任何区别。
- 这些字体通常只提供有限的几个“字重”（Font Weight），
-
网络字体 (如 Google Fonts, Adobe Fonts)：
- 网络字体通常会提供多个字重的文件,
300(Light),400(Regular),500(Medium),700(Bold) 等。 - 当您引入一个网络字体时,必须明确指定您需要哪些字重，浏览器会只下载您指定的字重文件，以优化加载速度。
- 网络字体通常会提供多个字重的文件,
Google Fonts 示例：
假设您想使用 "Roboto" 字体，并且需要 400 和 700 两种粗细。
-
错误做法 (只引入一个字重):
<!-- 只引入了 Regular (400) 版本 --> <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400&display=swap" rel="stylesheet">
即使你写
font-weight: 700;，浏览器也只能回退到400，因为700的文件没有被加载。 -
正确做法 (引入所需的所有字重):
<!-- 同时引入了 Regular (400) 和 Bold (700) 版本 --> <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
你的 CSS 规则
font-weight: 700;就能正常生效了。
其他实用技巧
使用 <strong> 或 <b>
这是语义化的方式,在不使用 CSS 的情况下也能实现加粗效果，浏览器默认会给这两个标签设置 font-weight: bold;。
<p>这是一段<strong>重要</strong>的文字。</p>
<p>这是一段<b>粗体</b>的文字。</p>
注意： 语义上，<strong> 表示内容重要性，<b> 表示突出显示，没有特别的重要性，从SEO和可访问性角度，优先使用 <strong>。
使用 text-shadow 模拟加粗效果
这是一种“障眼法”，通过给文字添加阴影来制造视觉上的加粗感，它不会改变文字的实际粗细，但有时能达到类似的效果。
.simulated-bold {
/* 给文字添加一个非常细微、同色的阴影 */
text-shadow: 1px 0px 0px #000, -1px 0px 0px #000, 0px 1px 0px #000, 0px -1px 0px #000;
/* 阴影颜色需要和文字颜色一致 */
color: #333;
}
这种方法性能开销较大,且可能影响文字的清晰度，不推荐作为常规手段，但在某些特殊设计场景下可以考虑。
总结与最佳实践
- 首选
font-weight：使用 font-weight: 700; 或 font-weight: bold; 是最标准、最有效的方法。
- 检查字体支持：在设置
font-weight 之前，务必确认你所使用的字体文件是否支持该字重，对于网络字体，要在 <link> 标签中列出所有需要的字重。
- 合理使用：加粗是为了突出重点，不要过度使用，否则会失去其效果，影响页面的可读性。
- 考虑性能：引入过多字重的网络字体会增加网页的加载体积，只加载你实际需要的字重。
希望这份详细的指南能帮助您完美地控制网页字体的粗细！
这是语义化的方式,在不使用 CSS 的情况下也能实现加粗效果，浏览器默认会给这两个标签设置 font-weight: bold;。
<p>这是一段<strong>重要</strong>的文字。</p> <p>这是一段<b>粗体</b>的文字。</p>
注意： 语义上，<strong> 表示内容重要性，<b> 表示突出显示，没有特别的重要性，从SEO和可访问性角度，优先使用 <strong>。
使用 text-shadow 模拟加粗效果
这是一种“障眼法”，通过给文字添加阴影来制造视觉上的加粗感，它不会改变文字的实际粗细，但有时能达到类似的效果。
.simulated-bold {
/* 给文字添加一个非常细微、同色的阴影 */
text-shadow: 1px 0px 0px #000, -1px 0px 0px #000, 0px 1px 0px #000, 0px -1px 0px #000;
/* 阴影颜色需要和文字颜色一致 */
color: #333;
}
这种方法性能开销较大,且可能影响文字的清晰度，不推荐作为常规手段，但在某些特殊设计场景下可以考虑。
总结与最佳实践
- 首选
font-weight：使用font-weight: 700;或font-weight: bold;是最标准、最有效的方法。 - 检查字体支持：在设置
font-weight之前，务必确认你所使用的字体文件是否支持该字重，对于网络字体，要在<link>标签中列出所有需要的字重。 - 合理使用：加粗是为了突出重点，不要过度使用，否则会失去其效果，影响页面的可读性。
- 考虑性能：引入过多字重的网络字体会增加网页的加载体积，只加载你实际需要的字重。
希望这份详细的指南能帮助您完美地控制网页字体的粗细！
