字體樣式

屬性名	含義	舉例
font-family	設定字體型別	font-family:“隸書”
font-size	設定字體大小	font-size:12px
font-style	設定字體風格	font-style:italic
font-weight	設定字體的粗細	font-weight:bold
font	設定所有字體屬性	font:italic bold 36px “宋體”

font-family屬性

.p1{ font-family: "隸書";}
.p2{font-family: "黑體"; }
.p3{ font-family: "Arial Black"; }

樣例代碼：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style>
			.p1{ font-family: "隸書";}
			.p2{font-family: "黑體"; }
			.p3{ font-family: "Arial Black"; }
		</style>
		<title></title>
	</head>
	<body>
		<h1>不加修飾的一級標題</h1>
		<h1 class="p1">一級標題隸書</h1>
		<h1 class="p2">一級標題黑體</h1>
		<h1 class="p3">一級標題Arial Black</h1>
	</body>
</html>

效果截圖：
在這里插入圖片描述

font-size屬性

單位：px（像素）

.p1{font-size: 10px; }

.p2{font-size: 20px;}

.p3{font-size: 30px;}

樣例代碼：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style>
			.p1{font-size: 10px; }
			
			.p2{font-size: 20px;}
			
			.p3{font-size: 30px;}
		</style>
		<title></title>
	</head>
	<body>
		<h1>這是正常的一級標題</h1>
		<h1 class="p1">這是10px的一級標題</h1>
		<h1 class="p2">這是20px的一級標題</h1>
		<h1 class="p3">這是30px的一級標題</h1>
	</body>
</html>

效果截圖：
在這里插入圖片描述

font-style屬性

normal、italic和oblique

.p1{font-style: normal; }
			
.p2{font-style: italic;}

.p3{font-style: oblique;}

樣例代碼：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style>
			.p1{font-style: normal; }
			
			.p2{font-style: italic;}
			
			.p3{font-style: oblique;}
		</style>
		<title></title>
	</head>
	<body>
		<h1>這是正常的一級標題</h1>
		<h1 class="p1">這是normal的一級標題</h1>
		<h1 class="p2">這是italic的一級標題</h1>
		<h1 class="p3">這是oblique的一級標題</h1>
	</body>
</html>

效果截圖：
在這里插入圖片描述

font-weight屬性

normal 默認值，定義標準的字體，
bold 粗體字體，

.p1{font-weight: normal; }
			
.p2{font-weight: bold ;}

樣例代碼：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style>
			.p1{font-weight: normal; }
			
			.p2{font-weight: bold ;}
			
		</style>
		<title></title>
	</head>
	<body>
		<p>這是正常的字體</p>
		<p class="p1">這是normal的字體</p>
		<p class="p2">這是bold的字體</p>
	</body>
</html>

效果截圖：
在這里插入圖片描述

font屬性

字體屬性的順序：字體風格→字體粗細→字體大小→字體型別

.p1{font:oblique bold 12px "楷體"; }

樣例代碼：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style>
			.p1{font:oblique bold 12px "楷體"; }
			
			
			
		</style>
		<title></title>
	</head>
	<body>
		<p>這是正常的字體</p>
		<p class="p1">這是font:oblique bold 12px "楷體";的字體</p>
		
	</body>
</html>

效果截圖：
在這里插入圖片描述
寫作不易，讀完如果對你有幫助，感謝點贊支持！
如果你是電腦端，看見右下角的“一鍵三連”了嗎，沒錯點它[哈哈]

加油！

共同努力！

Keafmd

轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/200682.html

標籤：java

上一篇：ajax異步實作檔案分片上傳

下一篇：JavaWeb案例(三)：使用response實作重定向