DIV CSS 佈局教程網

CSS 字體
編輯:CSS詳解     

CSS 字體 (font) 屬性定義文本中的字體。

設置字體屬性是樣式表的最常見用途之一。CSS 字體屬性允許您設置字體系列 (font-family) 和字體加粗 (font-weight),您還可以設置字體的大小、字體風格(如斜體)和字體變形(如小型大寫字母)。

指定字體

可以使用 font-family 屬性在文檔中采用某種字體系列。

使用通用字體系列

如果你希望文檔使用一種 sans-serif 字體,但是你並不關心是哪一種字體,以下就是一個合適的聲明:

body {font-family: sans-serif;}

這樣用戶代理就會從 sans-serif 字體系列中選擇一個字體(如 Helvetica),並將其應用到 body 元素。因為有繼承,這種字體選擇還將應用到 body 元素中包含的所有元素,除非有一種更特定的選擇器將其覆蓋。

指定字體系列

除了指定通用的字體系列,您還可以通過 font-family 屬性設置更具體的字體。

下面的例子為所有 h1 元素設置了 Verdana 字體:

h1 {font-family: Georgia;}

這樣的規則同時會產生另外一個問題,如果用戶代理上沒有安裝 Georgia 字體,就只能使用用戶代理的默認字體來顯示 h1 元素。

我們可以通過結合特定字體名和通用字體系列來解決這個問題:

h1 {font-family: Georgia, serif;}

如果讀者沒有安裝 Georgia,但安裝了 Times 字體(serif 字體系列中的一種字體),用戶代理就可能對 h1 元素使用 Times。盡管 Times 與 Georgia 並不完全匹配,但至少足夠接近。

因此,我們建議在所有 font-family 規則中都提供一個通用字體系列。這樣就提供了一條後路,在用戶代理無法提供與規則匹配的特定字體時,就可以選擇一個候選字體。

如果您對字體非常熟悉,也可以為給定的元素指定一系列類似的字體。要做到這一點,需要把這些字體按照優先順序排列,然後用逗號進行連接:

p {font-family: Times, TimesNR, 'New Century Schoolbook',
     Georgia, 'New York', serif;}

根據這個列表,用戶代理會按所列的順序查找這些字體。如果列出的所有字體都不可用,就會簡單地選擇一種可用的 serif 字體。

使用引號

您也許已經注意到了,上面的例子中使用了單引號。只有當一個字體名中有一個或多個空格(比如 New York),或者如果字體名包括 # 或 $ 之類的符號,才需要在 font-family 聲明中加引號。

單引號或雙引號都可以接受。但是,如果把一個 font-family 屬性放在 HTML 的 style 屬性中,則需要使用該屬性本身未使用的那種引號。

CSS 字體實例:

設置文本的字體
本例演示如何設置文本字體。
設置字體尺寸
本例演示如何設置字體尺寸。
設置字體風格
本例演示如何設置字體風格。
設置字體的異體
本例演示如何設置字體的異體。
設置字體的粗細
本例演示如何設置字體的粗細。
所有字體屬性在一個聲明之內
本例演示如何使用簡寫屬性將字體屬性設置在一個聲明之內。

CSS 字體屬性

屬性 描述 font 簡寫屬性。作用是把所有針對字體的屬性設置在一個聲明中。 font-family 設置字體系列。 font-size 設置字體的尺寸。 font-size-adjust 當首選字體不可用時,對替換字體進行智能縮放。(CSS2.1 已刪除該屬性。) font-stretch 對字體進行水平拉伸。(CSS2.1 已刪除該屬性。) font-style 設置字體風格。 font-variant 以小型大寫字體或者正常字體顯示文本。 font-weight 設置字體的粗細。
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved