CSS 字體屬性font相關(guān)的用法
發(fā)布時間：2011-01-05 22:44:05 作者：佚名 
我要評論
我要評論CSS可以利用字體屬性設(shè)置頁面中字體的種類、大小、風(fēng)格、粗細（濃淡）等表現(xiàn)。
設(shè)置字體名稱屬性(font-family)
這個屬性設(shè)置頁面中選擇用哪種字體，常用的字體有：Simsun、Arial、Verdana、Helvetica、 sans-serif等，定義方法：
.ziti {font-family:Simsun,Arial,Verdana;}
在這里連續(xù)定義了三種字體，當用戶字庫中沒有第一種字體時就使用第二種，以此類推，如果CSS中設(shè)置的字體都沒有則使用瀏覽器中的默認值。
設(shè)置字體大小屬性(font-size)
font-size可以設(shè)置頁面中字體大小，有三種常用的單位em，px，pt。
簡短介紹一下這三種長度單位：
px，相對長度單位。像素（Pixel）。
em，相對長度單位。相對于當前對象內(nèi)文本的字體尺寸。
pt，絕對長度單位。點（Point）。
其中最常用的就是px。字體設(shè)置方法如下：
.ziti {font-size:12px;}
設(shè)置字體風(fēng)格屬性(font-style)
字體風(fēng)格是設(shè)置字體是否斜體的屬性，一共有三個值：normal、 italic、oblique，normal是默認值，italic，oblique都是斜體顯示。例子：
.ziti {font-style:italic;}
設(shè)置字體粗細（濃淡）屬性(font-weight)
字體的粗細（濃重）只有兩個屬性，因為它只有粗體和非粗體兩種，它的值是normal和bold，normal是默認值。例子：
.ziti {font-weight:bold;}
設(shè)置字體變量屬性(font-variant)
font-variant只針對英文字母，對漢字沒有效果。它定義字體以小型號大寫字母顯示，小型大寫字母可以理解為小個子的大寫字母，它雖然是大寫字母，但它的文字大小卻和小寫字母是相同的，比直接輸入的大寫字母要小。
font-variant有兩個值，normal和small-caps。normal是默認值，它是正常的字體。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;}
如果哪項屬性是默認值，可以把他省略不寫，系統(tǒng)會自動解析其為默認值。
字體顏色(color)
字體的顏色屬于CSS文本屬性中的內(nèi)容，它不像字體屬性那樣需要在color前加上font，只需要color就可以定義了。
.ziti {font:italic normal bold 18px arial;color:red;}
相關(guān)文章
- css中font的簡寫方法（包括font-weight，font-size,line-height,font-family） 也就是粗細、大小、行高、字體等等，把它們合在一起寫，需要的朋友可以參考下2013-12-12
- 造成IE6.0下多出來高度的原因是因為沒有給div定義字體大小的情況下，默認是font-size;12px所以給font-size定義為0就可以解決問題了2013-11-14
- css中文字體font-family列表主要是系統(tǒng)自帶的一些、裝Office會生出來的一些、Windows的一些，感興趣的朋友可以了解下2013-10-10
- css中的font-weight 屬性可以設(shè)置文本的，想必大家都對它有所了解了，該屬性用于設(shè)置顯示元素的文本中所用的字體加粗，感興趣的朋友可以了解下2013-09-16
- CSS font-family字體樣式設(shè)置屬性知識教程篇，CSS font-family-CSS字體樣式知識教程。在網(wǎng)頁中我們常常對網(wǎng)頁中文字設(shè)置字體，我們即可使用font-family實現(xiàn)字體樣式設(shè)置2013-05-02
- font 屬性的快捷寫法有利于提高書寫效率，本文整理了一些，需要了解的朋友可以參考下2012-12-21
- 直接使用中文名稱時，在不支持中文的系統(tǒng)或編碼的頁面就有可能會無法正常顯示。如果使用Unicode碼的話又不方便記憶2012-05-03
使用font-size：0 來去掉inline-block元素之間的空隙方法
像下面圖中的布局，如果排列的元素是等高的話，相信很多人都會使用浮動來布局，不過如果元素不等高的話，不添加多余的標簽，浮動布局是很難實現(xiàn)下圖中的效果。如果遇到這種2011-08-02使用font-size：0px 來制作跨瀏覽器的inline-block css屬性
像下面圖中的布局，如果排列的元素是登高的話，相信很多人都會使用浮動來布局，不過如果元素不等高的話，不添加多余的標簽，浮動布局是很難實現(xiàn)下圖中的效果。如果遇到這種2011-07-29- CSS的字體樣式設(shè)置相信許多人再熟悉不過，其實字體樣式的設(shè)置并不僅僅限于我們平時常用的那幾個屬性，本文為您詳細敘述 font-size 的字體樣式設(shè)置的詳細屬性。2009-08-29