CSS 字體
css字體樣式(Font Style)是網(wǎng)頁中不可或缺的樣式屬性之一,有了字體樣式,我們的網(wǎng)頁才能變得更加美觀,因此字體樣式屬性也就成為了每一位設(shè)計者必需了解的知識。
設(shè)定字體名稱屬性(font-family)
#這個屬性設(shè)定頁面中選擇用哪一種字體，常用的字體有：Simsun 、Arial、Verdana、Helvetica、 sans-serif等，定義方法：
.ziti {font-family: Simsun,Arial,Verdana;}
#在這裡連續(xù)定義了三種字體，當使用者字庫中沒有第一種字體時就使用第二種，以此類推，如果CSS中設(shè)定的字體都沒有則使用瀏覽器中的預設(shè)值。
#設(shè)定字體大小屬性(font-size)
#font-size可以設(shè)定頁面中字體大小，有三種常用的單位em，px，pt。
簡單介紹這三種長度單位：
px，相對長度單位。像素（Pixel）。
em，相對長度單位。相對於目前物件內(nèi)文字的字體尺寸。
pt，絕對長度單位。點（Point）。
其中最常用的就是px。字體設(shè)定方法如下：
.ziti {font-size:12px;}?
# #設(shè)定字體風格屬性(font-style)
字體風格是設(shè)定字體是否斜體的屬性，總共有三個值：
normal、italic 、oblique，normal是預設(shè)值，italic，oblique都是斜體顯示。範例：
.ziti {font-style:italic;}?
設(shè)定字型變數(shù)屬性(font-variant)
#font-variant只針對英文字母，對漢字沒有效果。它定義字體以小型號大寫字母顯示，小型大寫字母可以理解為小個子的大寫字母，它雖然是大寫字母，但它的文字大小卻和小寫字母是相同的，比直接輸入的大寫字母要小。
font-variant有兩個值，normal和small-caps。 normal是預設(shè)值，它是正常的字體。 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;}?
如果哪項屬性是預設(shè)值，可以把他省略不寫，系統(tǒng)會自動解析其為預設(shè)值。
字體顏色(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和目前字體大小相等。在瀏覽器中預設(shè)的文字大小是16px。
因此，1em的預設(shè)大小是16px?？梢酝高^下面這個公式將像素轉(zhuǎn)換為em：px/16=em
實例
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)整文字的大小時，會比正常的尺寸更大或更小。
也可以使用百分比來調(diào)整字體大小：body {font-size:100%;}
##實例：
<!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>
#
