網(wǎng)頁(yè)設(shè)計(jì)中最重要的細(xì)節(jié)之一——字體(6)

font-family：用于定義字體，上面有演示不多說(shuō)。更詳細(xì)的資料請(qǐng)看：font-family。

font-style：用于定義字體的樣式，包括正常、斜體、傾斜等，對(duì)應(yīng)的屬性值為：normal – 文本正常顯示、italic – 文本斜體顯示、oblique – 文本傾斜顯示。

font-weight：用于定義文字的粗細(xì)，詳細(xì)的屬性值請(qǐng)看：font-weight。

font-size：設(shè)置字體大小，不再贅述。

line-height：用于設(shè)置文字中的行間距，合適的行間距對(duì)用戶閱讀帶來(lái)良好體驗(yàn)。同時(shí)還可以用于垂直布局單行文字。

letter-spacing：設(shè)置文字之間的字間距，使文字之間的距離增大或者減小。

word-spacing：用于調(diào)整單詞的間距。

text-align：用來(lái)對(duì)齊文字，例如左對(duì)齊、右對(duì)齊、居中對(duì)齊等。

text-decoration：用來(lái)修飾一段文本，例如添加下劃線等。常對(duì) a 標(biāo)簽使用這個(gè)屬性消除其默認(rèn)的下劃線。

上面是與字體相關(guān)，比較常用的 CSS 屬性，還有其他更加具體的，可以參考網(wǎng)上的資料，推薦 W3school 上面的有關(guān)字體的資料。

使用在線字體

在 CSS3 中，引入了一個(gè)非常強(qiáng)大而且實(shí)用的功能來(lái)面對(duì)上面的字體選擇問(wèn)題。傳統(tǒng)的字體選擇，要你的操作系統(tǒng)中安裝相應(yīng)字體才可以顯示。如果你在網(wǎng)頁(yè)作品中，使用了其他的創(chuàng)意字體，那么你需要生成相應(yīng)的文字圖片來(lái)替換，否則不會(huì)顯示。CSS3 中的這個(gè)功能，就是 Web Fonts，網(wǎng)頁(yè)中可以使用安裝在服務(wù)器端的字體。你可以將選擇好的字體，上傳到服務(wù)器中，然后使用 CSS3 新增的 @font-face 屬性，來(lái)調(diào)用服務(wù)器上的字體，然后來(lái)渲染網(wǎng)頁(yè)。

支持 CSS3 這一功能的瀏覽器，會(huì)首先找到服務(wù)器上的字體，然后下載下來(lái)進(jìn)行渲染。這樣就徹底解決了本地操作系統(tǒng)中，沒(méi)有對(duì)應(yīng)字體的問(wèn)題。關(guān)于 @font-face 的具體使用方法，由于比較多，在本文不再贅述，請(qǐng)大家自行百度之：@font-face的使用方法。

既