CSS 字體
css字體樣式(Font Style)是網(wǎng)頁中不可或缺的樣式屬性之一,有了字體樣式,我們的網(wǎng)頁才能變得更加美觀,因此字體樣式屬性也就成為了每一位設(shè)計(jì)者必需了解的知識(shí)。
設(shè)置字體名稱屬性(font-family)
這個(gè)屬性設(shè)置頁面中選擇用哪種字體，常用的字體有：Simsun、Arial、Verdana、Helvetica、 sans-serif等，定義方法：
.ziti {font-family: Simsun,Arial,Verdana;}
在這里連續(xù)定義了三種字體，當(dāng)用戶字庫中沒有第一種字體時(shí)就使用第二種，以此類推，如果CSS中設(shè)置的字體都沒有則使用瀏覽器中的默認(rèn)值。
設(shè)置字體大小屬性(font-size)
font-size可以設(shè)置頁面中字體大小，有三種常用的單位em，px，pt。
簡(jiǎn)短介紹一下這三種長(zhǎng)度單位：
px，相對(duì)長(zhǎng)度單位。像素（Pixel）。
em，相對(duì)長(zhǎng)度單位。相對(duì)于當(dāng)前對(duì)象內(nèi)文本的字體尺寸。
pt，絕對(duì)長(zhǎng)度單位。點(diǎn)（Point）。
其中最常用的就是px。字體設(shè)置方法如下：
.ziti {font-size:12px;}?
設(shè)置字體風(fēng)格屬性(font-style)
字體風(fēng)格是設(shè)置字體是否斜體的屬性，一共有三個(gè)值：
normal、 italic、oblique，normal是默認(rèn)值，italic，oblique都是斜體顯示。例子：
.ziti {font-style:italic;}?
設(shè)置字體粗細(xì)（濃淡）屬性(font-weight)
字體的粗細(xì)（濃重）只有兩個(gè)屬性，因?yàn)樗挥写煮w和非粗體兩種，它的值是normal和bold，normal是默認(rèn)值。例子：
.ziti {font-weight:bold;}?
設(shè)置字體變量屬性(font-variant)
font-variant只針對(duì)英文字母，對(duì)漢字沒有效果。它定義字體以小型號(hào)大寫字母顯示，小型大寫字母可以理解為小個(gè)子的大寫字母，它雖然是大寫字母，但它的文字大小卻和小寫字母是相同的，比直接輸入的大寫字母要小。
font-variant有兩個(gè)值，normal和small-caps。normal是默認(rèn)值，它是正常的字體。small-caps是將小寫字母轉(zhuǎn)換成大寫字母。例子：
.ziti {font-variant:small-caps;}?
字體屬性綜合寫法(font)
font是字體屬性中可以綜合定義以上五種屬性的快捷方法，它可以用一行來定義font屬性，書寫順序分別是：font-style font-variant font-weight font-size font-family。例子：
?.ziti {font:italic normal bold 18px arial;}?
如果哪項(xiàng)屬性是默認(rèn)值，可以把他省略不寫，系統(tǒng)會(huì)自動(dòng)解析其為默認(rèn)值。
字體顏色(color)
字體的顏色屬于CSS文本屬性中的內(nèi)容，它不像字體屬性那樣需要在color前加上font，只需要color就可以定義了。
?.ziti {font:italic normal bold 18px arial;color:red;}?
用em來設(shè)置字體大小
為了避免Internet Explorer 中無法調(diào)整文本的問題，許多開發(fā)者使用 em 單位代替像素。
em的尺寸單位由W3C建議。
1em和當(dāng)前字體大小相等。在瀏覽器中默認(rèn)的文字大小是16px。
因此，1em的默認(rèn)大小是16px?？梢酝ㄟ^下面這個(gè)公式將像素轉(zhuǎn)換為em：px/16=em
實(shí)例
h1 {font-size:2.5em;} /* 40px/16=2.5em */
h2 {font-size:1.875em;} /* 30px/16=1.875em */
p {font-size:0.875em;} /* 14px/16=0.875em */
嘗試一下?
在上面的例子，em的文字大小是與前面的例子中像素一樣。不過，如果使用 em 單位，則可以在所有瀏覽器中調(diào)整文本大小。
不幸的是，仍然是IE瀏覽器的問題。調(diào)整文本的大小時(shí)，會(huì)比正常的尺寸更大或更小。
還可以使用百分比來調(diào)整字體大?。篵ody {font-size:100%;}
實(shí)例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>font屬性</title>
</head>
<style type="text/css">
p#pmin
{
font:1em Arial;
}
p#pall
{
font:italic small-caps bold 12px/1.2em Arial;
}
p#p2
{
font:italic 18px/1.5em "宋體",Arial,sans-serif;
}
</style>
</head>
<body>
<p id="pmin">font值最小的形式,定義段落的字體為1倍字體大小(font-size屬性),Arial字體(font-family屬性).</p>
<p id="pall">定義段落的字體為斜體(font-style屬性),小型的大寫字母(font-variant屬性),粗體(font-weight屬性),12px字體大小(font-size屬性),1.2倍(字體)的行高(line-height屬性),Arial字體(font-family屬性).</p>
<p id="p2">字體屬性演示</p>
</body>
</html>
