CSS 加粗文本

17 Mar 2025 | 4 分钟阅读

CSS 中的 font-weight 属性用于设置字体的粗细程度。它指定了文本中字符的粗细。 font-weight 属性取决于浏览器指定的粗细或字体系列中可用的字体。此 CSS 属性定义了从细到粗的字符。

它接受预定义的数字值或关键字值。我们可以与此属性一起使用的可用关键字是 normal、bold、lighter 和 bolder。数字值可以是 100、200、300……最高可达 900。较高的数字值表示比较低数字值更粗的字重。

语法

上面语法中的 number 代表数字值。数字值 400 与关键字值 normal 相同,值 700 与关键字值 bold 相同。

normal 值定义普通字符,bold 值指定粗字符。 bolder 值表示更粗的字重,lighter 值表示比父级继承的字重更轻的字重。

让我们通过一个例子来看看如何在 CSS 中加粗文本。

引言

CSS 被称为网页开发的强大工具。借助它,我们可以用多种方式设置 HTML 内容的样式。网页样式中最常用的属性之一是使用 font-weight 属性。通过加粗文本,我们可以强调关键信息和视觉对比度,它还可以提高内容的可读性。

理解 Font-Weight 属性

在 CSS 中,有一个 Font-Weight 属性,用于定义字体的粗细。它还决定了文本加粗或变亮的程度,更高的值表示更粗的字重。 font-weight 属性接受多种值,例如数字和关键字值。

数字值的范围在 100 到 900 之间,以 100 为增量。例如,如果我们取 font-weight 值为 400,那么它是 normal,而 700 的 font-weight 值被认为是 bold。Bold、bolder、lighter 和一些常用的关键字值。

如何使用 CSS 创建粗体文本

我们可以使用 CSS 在 HTML 中创建粗体文本。我们可以使用内联、内部或外部字体样式属性。

1. 如何使用内联样式创建粗体文本

借助内联样式,我们可以将 font-weight 属性直接应用于特定的 HTML 元素。我们来看一个例子。

HTML 代码

输出

How to bold text in CSS

说明

在上面的代码中,我们使用了内联 CSS,并将 font-weight 属性设置为 bold。

2. 如何使用内部样式创建粗体文本

在这里,我们必须在 head 标签内使用 style 标签编写 CSS 属性。我们来看一个例子

HTML 代码

输出

How to bold text in CSS

说明

在上面的代码中,我们使用了内部 CSS 并应用了 font-weight 属性。

3. 如何使用外部样式创建粗体文本

在这里,我们必须创建一个外部 CSS 文件并将其链接到 HTML 文件。在该 CSS 文件中,我们必须编写样式属性。让我们举个例子。

HTML 代码

CSS 代码

输出

How to bold text in CSS

说明

在上面的代码中,我们使用了外部 CSS 属性并实现了 font-weight 属性。

示例

让我们通过下面的例子来看看如何创建不同深浅的粗体文本

输出

How to bold text in CSS