css怎么设置字体加粗样式-tutorial css-php.cn

css怎么设置字体加粗样式

青灯夜游

Lepaskan： 2021-04-16 11:24:51

asal

74030 orang telah melayarinya

css设置字体加粗样式的方法：首先创建一个HTML示例文件；然后在body中定义一些文字内容；最后通过“font-weight:bold;”或“font-weight:bolder;”属性设置字体加粗样式即可。

css怎么设置字体加粗样式

本文操作环境：Windows7系统、Dell G3电脑、HTML5&&CSS3。

首先我们通过简单的代码示例，为大家详细解说关于css给字体加粗的实现方法！

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>css 字体加粗</title>
		<style>
			.a1{
				font-weight:bold;
			}
			.a2{
				font-weight:bolder;
			}
		</style>
	</head>
	<body>
		<div>
			<p>这是一段测试文字<br />
				<span class="a1">这里使用bold属性值加粗字体</span><br />
			
				<span class="a2">这里使用bolder属性值加粗字体</span>
			</p>
		</div>
	</body>
</html>

Salin selepas log masuk

我们来看看效果图：

通过示例，可以知道：这里实现字体加粗效果主要用到了css中的font-weight:bold;和font-weight:bolder;的样式属性。我们应该知道font-weight属性可以设置文本字体的粗细，而设置bold属性值可以定义粗体字符，bolder属性值可以定义更粗的字符，进而实现字体加粗效果。

在css font-weight属性中不仅仅只有bold属性值和bolder属性值可以加粗字体，还设置数值来加粗字体，我们来看看效果：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>css 字体加粗</title>
		<style>
			.a1{
				font-weight:bold;
			}
			.a2{
				font-weight:800;
			}
		</style>
	</head>
	<body>
		<div>
			<p>这是一段测试文字<br /><br />
				<span class="a1">这里使用bold属性值加粗字体</span><br /><br />
			
				<span class="a2">这里使用数值加粗字体</span>
			</p>
		</div>
	</body>
</html>

Salin selepas log masuk

效果图：