編碼的世界 / 優質文選 / 生涯

（3）CSS指定文本字體、加粗、傾斜、大小寫等

2022年7月26日
-   

本文講述的主要講述文檔的字體及其外觀屬性（包括字型，字號，粗體，斜體等屬性）

（1）font-family：指定字體  實例如下：font-family: times, "times new roman", serif; 。
可以指定字體列表，如果用戶的 計算機上沒有安裝第一種字型，則瀏覽器會嘗試使用第二個，不同字型之間使用逗號分隔，如果字型名包含空格，則應包含在雙引號內。字型列表的最後都是所謂的通用通用字體組，因為每個計算機都會有一個和通用字體組對應的字體。通用字體組包括（serif，sans-serif，monospace，cursive，fantasy）
（2）font-size：指定字體大小  如： font-size：12px。 其單位可以有px，em，ex等等。
也可以是絕對大小： font-size：xx-small x-small small medium large x-large xx-large
（3）font-weight: 指定字體粗細  對於粗細的設置，瀏覽器並不是尋找字型的粗體版本，而是通過一種算法來改變普通字體的寬度。
font-weight的可能取值包括：normal bold bolder lighter 100 200 300 400 500 600 700 800 900
（4）font-style: 指定文本斜體顯示可能取值有：normal，italic，oblique
斜體（italic）是一種簡單的字體風格，對每個字母的結構有一些小改動，來反映變化的外觀。與此不同，傾斜（oblique）文本則是正常豎直文本的一個傾斜版本。
（5）font-variant：以小型大寫字體或者正常字體顯示文本  可能取值有：normal和small-caps
 給出測試代碼CSS：
p.one {
	font-family: Georgia, verdana, sans-serif;
	font-size: 12px;
	font-weight: lighter;
	font-style: normal;
	font-variant: normal;
}
p.two {
	font-family: times, "times new roman", serif;
	font-size: 15px;
	font-weight: normal;
	font-style: italic;
	font-variant: small-caps;
}
p.three {
	font-family: courier, "courier new", monospace;
	font-size: 18px;
	font-weight: bold;
	font-style: oblique;
	font-variant: normal;
}
p.four {
	font-family: courier, "courier new", monospace;
	font-size: 21px;
	font-weight: bolder;
	font-style: normal;
	font-variant: small-caps;
}

HTML：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
	<head>
		<meta charset="utf-8" />
		<base href="/testsmarty/templates/"></base>
		<title>文本字體控制</title>
		<link rel="stylesheet" type="text/css" href="text1.css">
	</head>
	
	<body>
		<p class="one">測試用，第一段. abcdefg</p>
		<p class="two">測試用，第二段. abcdefg</p>
		<p class="three">測試用，第三段. abcdefg</p>
		<p class="four">測試用，第四段. abcdefg</p>
		</div>
	</body>
</html>

效果圖：

 

熱門文章