CSS 字體
css字體樣式(Font Style)是網頁中不可或缺的樣式屬性之一,有了字體樣式,我們的網頁才能變得更加美觀,因此字體樣式屬性也就成為了每一位設計者必需了解的知識。
設定字體名稱屬性(font-family)
#這個屬性設定頁面中選擇用哪一種字體，常用的字體有：Simsun 、Arial、Verdana、Helvetica、 sans-serif等，定義方法：
.ziti {font-family: Simsun,Arial,Verdana;}
#在這裡連續定義了三種字體，當使用者字庫中沒有第一種字體時就使用第二種，以此類推，如果CSS中設定的字體都沒有則使用瀏覽器中的預設值。
#設定字體大小屬性(font-size)
#font-size可以設定頁面中字體大小，有三種常用的單位em，px，pt。
簡單介紹這三種長度單位：
px，相對長度單位。像素（Pixel）。
em，相對長度單位。相對於目前物件內文字的字體尺寸。
pt，絕對長度單位。點（Point）。
其中最常用的就是px。字體設定方法如下：
.ziti {font-size:12px;}
# #設定字體風格屬性(font-style)
字體風格是設定字體是否斜體的屬性，總共有三個值：
normal、italic 、oblique，normal是預設值，italic，oblique都是斜體顯示。範例：
.ziti {font-style:italic;}
設定字型變數屬性(font-variant)
#font-variant只針對英文字母，對漢字沒有效果。它定義字體以小型號大寫字母顯示，小型大寫字母可以理解為小個子的大寫字母，它雖然是大寫字母，但它的文字大小卻和小寫字母是相同的，比直接輸入的大寫字母要小。
font-variant有兩個值，normal和small-caps。 normal是預設值，它是正常的字體。 small-caps是將小寫字母轉換成大寫字母。範例：
.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;}
如果哪項屬性是預設值，可以把他省略不寫，系統會自動解析其為預設值。
字體顏色(color)
#字體的顏色屬於CSS文字屬性中的內容，它不像字體屬性那樣需要在color前面加上font，只需要color就可以定義了。
.ziti {font:italic normal bold 18px arial;color:red;}
用em來設定字體大小
為了避免Internet Explorer 中無法調整文字的問題，許多開發者使用em 單位來取代像素。
em的尺寸單位由W3C建議。
1em和目前字體大小相等。在瀏覽器中預設的文字大小是16px。
因此，1em的預設大小是16px。可以透過下面這個公式將像素轉換為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 單位，則可以在所有瀏覽器中調整文字大小。
不幸的是，仍然是IE瀏覽器的問題。調整文字的大小時，會比正常的尺寸更大或更小。
也可以使用百分比來調整字體大小：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>
#
