1. 程式人生 > >(3)CSS指定文字字型、加粗、傾斜、大小寫等

(3)CSS指定文字字型、加粗、傾斜、大小寫等

本文講述的主要講述文件的字型及其外觀屬性(包括字型,字號,粗體,斜體等屬性)

 

(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>
效果圖: