css怎麼設定字體加粗樣式-css教學-PHP中文網

css怎麼設定字體加粗樣式

青灯夜游

發布： 2021-04-16 11:24:51

原創

73820 人瀏覽過

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>

登入後複製

我們來看看效果圖：

css怎麼設定字體加粗樣式

#透過範例，可以知道：這裡實作字體加粗效果主要用到了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>

登入後複製

效果圖：

css怎麼設定字體加粗樣式