📌  相关文章
📜  HTML | DOM 样式 fontWeight 属性(1)

📅  最后修改于: 2023-12-03 15:01:12.814000             🧑  作者: Mango

HTML | DOM 样式 fontWeight 属性

介绍

在 HTML 页面中，我们可以通过一些样式属性来控制文本的外观。其中 fontWeight 属性用于设置字体的粗细程度。

语法

fontWeight 属性的语法如下：

<style>
    <!-- 设置文本粗细为 600 -->
    p {
        font-weight: 600;
    }
</style>
取值

fontWeight 属性可以取以下值：

  • normal: 默认值，文本的粗细为普通。
  • bold: 文本的粗细为粗体。
  • bolder: 文本的粗细增加一级。
  • lighter: 文本的粗细减小一级。
  • 100,200,300,400,500,600,700,800,900：数字表示文本的粗细程度，值越大，字体越粗。
实例

以下是一个设置文本粗细的实例：

<!DOCTYPE html>
<html>
<head>
	<title>HTML | DOM 样式 fontWeight 属性</title>
	<style>
		.bold {
			font-weight: bold;
		}
		.bolder {
			font-weight: bolder;
		}
		.normal-italic {
			font-weight: normal;
			font-style: italic;
		}
	</style>
</head>
<body>
	<p class="bold">这是粗体。</p>
	<p class="bolder">这是更粗的字体。</p>
	<p class="normal-italic">这是普通文本，并且为斜体。</p>
</body>
</html>

页面效果如下：

效果图

结论

通过设置 fontWeight 属性，我们可以轻松地控制文本的粗细程度，进而改变文本的外观。