在這一章中，我們會(huì)介紹影響文本顯示的一些最常用的屬性。有很多CSS屬性專門用來幫助我們設(shè)置文本樣式。通過使用CSS，我們可以控制文本的字體、風(fēng)格和顏色，甚至可以控制文本上加的裝飾。

常用的文本屬性

font-family

我們可用font-family屬性定制頁面中使用的字體。 字體會(huì)對(duì)頁面設(shè)計(jì)產(chǎn)生巨大影響。在CSS中，字體劃分為”字體系列”(font-family)，我們可以從中指定希望頁面中各個(gè)元素使用的字體。例如：

font-size

我們可用font-size屬性控制字體大小。字體大小(font size)對(duì)于Web頁面的設(shè)計(jì)和可讀性也有很大影響。例如：

color

我們可用color屬性為文本設(shè)置顏色。例如：

font-weight

我們可用font-weight屬性影響字體的粗細(xì)。例如：

text-decoration

我們可使用text-decoration屬性為文本增加更多風(fēng)格。通過使用text-decoration屬性，可以對(duì)文本加一些裝飾，包括上劃線、下劃線和刪除線。例如：

字體系列概述

我們已經(jīng)見過font-family屬性，到目前為止總是將這個(gè)屬性的值指定為“sans-serif”。對(duì)于font-family屬性還可以更有創(chuàng)意一些，可以指定為其他的字體，不過首先來了解字體系列到底是什么？下面就來簡單看一下······ 每個(gè)font-family包含一組有共同特征的字體。共有5個(gè)字體系列：sans-serif、serif、monospace、cursive和fantasy。每個(gè)字體系列都包括大量字體。

仔細(xì)查看這些字體系列：serif字體看起來很高雅、很傳統(tǒng)，而sans-serif字體外觀很清晰，可讀性好。monospace字體就好像是打字機(jī)打出來的。cursive和fantasy字體給人一種有趣或者很有風(fēng)格的感覺。

使用CSS指定字體系列

我們之前已經(jīng)見過font-family屬性了，現(xiàn)在再來看一個(gè)更有意思的例子：

了解以上知識(shí)之后，我們就要清楚font-family規(guī)范是如何工作的？瀏覽器會(huì)這樣解釋你在font-family規(guī)范中列出的字體：

利用font-family屬性，你可以創(chuàng)建一個(gè)首選字體列表。我們希望大多數(shù)瀏覽器都能有你的第一個(gè)選擇，不過，如果沒有，至少可以確保瀏覽器能提供同一個(gè)字體系列中的一個(gè)通用字體。 下面我們來看一下以下幾個(gè)問題：

如果一個(gè)字體名中包含多個(gè)單詞，比如Courier New，我怎么指定這樣一個(gè)字體呢？ 答：只需要在font-family聲明中的字體名兩邊加上引號(hào)，就像這樣：

引入Web字體

關(guān)于字體，很不幸的是，你沒有辦法控制用戶計(jì)算機(jī)上安裝什么字體。不僅如此，他們還往往使用不同的操作系統(tǒng)。例如，也許你的Mac上有某些字體，而在用戶PC上很可能沒用這些字體。所以，如何處理這種情況呢？嗯，一種靠得住的策略是創(chuàng)建一個(gè)字體列表，其中包含最適合你的頁面的字體，并希望用戶已經(jīng)安裝了這些字體。不過，如果他們沒有這些字體，至少我們可以依靠瀏覽器來提供相同字體系列中的一種通用字體。 這時(shí)我們就需要引入Web字體了，我們可以使用Web字體(Web Font)向用戶的瀏覽器提供一種字體。為此，要用到CSS的一個(gè)比較新的特性：@font-face規(guī)則。這個(gè)規(guī)則允許你定義一種字體的名字和位置，然后可以在你的頁面中使用。

Web字體如何工作

有了Web字體，你可以充分利用現(xiàn)代瀏覽器的一個(gè)新功能，能夠向用戶直接提供新的字體。一旦提供了新字體，瀏覽器就能使用Web字體，就像使用所有其他字體一樣，甚至可以用CSS指定文本樣式。下面詳細(xì)分析Web字體如何工作：

現(xiàn)在，我們來解決以下問題：

如何為頁面增加Web字體

想為頁面增加一種特殊的字體？下面一步一步說明如何使用Web字體和CSS中的@font-face規(guī)則來實(shí)現(xiàn)。

確保有所需字體的所有格式 關(guān)于Web字體有一個(gè)好消息：@font-face CSS規(guī)則基本上已經(jīng)成為所有現(xiàn)代瀏覽器的一個(gè)標(biāo)準(zhǔn)。不過也有一個(gè)壞消息：存儲(chǔ)字體使用的具體格式還不是一個(gè)標(biāo)準(zhǔn)(不過已經(jīng)離這個(gè)目標(biāo)越來越接近了)。實(shí)際上，不同的瀏覽器對(duì)很多不同的格式提供了不同程度的支持。下面是一些常用的格式(以及各自的文件擴(kuò)展名)：

大多數(shù)現(xiàn)代瀏覽器上支持最為廣泛的格式是Web開發(fā)字體格式，所以這也是我們推薦使用的格式。你可以為較老的瀏覽器提供一個(gè)候選字體，我們將使用TrueType作為候選，因?yàn)檫@種字體在所有瀏覽器上也得到了很好的支持(但I(xiàn)E除外)。

把你的字體文件放在Web上 你可能想把你的字體文件放在Web上，這樣用戶的瀏覽器就能訪問這些字體。或者也可以利用網(wǎng)上的很多在線字體服務(wù)，這些服務(wù)會(huì)為你托管這些文件。不論哪一種情況，你都需要字體文件的URL。例如，我們已經(jīng)把這些文件放在wickedlysmart.com上：

在CSS中增加@font-face屬性 你已經(jīng)得到了“Emblema One“字體的.woff和.ttf版本的URL，所以現(xiàn)在可以為外部樣式文件(如xxx.css)增加一個(gè)@font-face規(guī)則。把這個(gè)規(guī)則增加到文件的最上面，放在body規(guī)則之上：

規(guī)則以@font-face開頭。

@font-face規(guī)則告訴瀏覽器：要加載由src URL指定的字體文件。瀏覽器會(huì)嘗試加載每一個(gè)src文件，直到找到它能支持的一個(gè)文件。一旦加載，會(huì)為這個(gè)字體分配font-family屬性中指定的名字，在這里就是“Emblema One”。

在CSS中使用font-family名 一旦用@font-face規(guī)則在瀏覽器中加載一個(gè)字體，接下來就可以使用這個(gè)字體了，可以用font-family屬性引用你指定的字體名。例如，我們想要改變頁面中<h1>標(biāo)題的字體，讓它使用“Emblema One”字體，為此，我們要為<h1>增加一個(gè)規(guī)則，如下所示：

注意：TTF和WOFF字體格式在IE8及以前的版本中不可用。如果你希望支持那些使用較老IE瀏覽器的用戶，需要對(duì)Web字體多做一點(diǎn)工作，要使用一個(gè)EOT字體。 現(xiàn)在，我們來解決以下問題：

調(diào)整字體大小

我們需要知道如何指定字體大小，具體來說，指定字體大小的方法有很多。下面先來看指定font-size的一些方法，然后討論哪種方法最好，可以保證字體大小，還能做到用戶友好。

px 可以按像素指定字體大小，就像圖像使用的像素尺寸一樣。用像素指定字體大小時(shí)，就是在告訴瀏覽器字母高度是多少像素。例如，在body規(guī)則中指定font-size：

在CSS中，指定像素?cái)?shù)時(shí)，先要指定一個(gè)數(shù)，后面是“px”，“px”必須緊跟在像素?cái)?shù)后面，之間不能有空格。這說明font-size應(yīng)當(dāng)是14像素高。 設(shè)置一個(gè)字體高度為14像素，這說明字母的最低部分與最高部分之間有14像素。

% 用像素指定字體大小時(shí)，會(huì)明確指出字體具體有多大，與之不同，用一個(gè)百分?jǐn)?shù)指定字體大小時(shí)，會(huì)相對(duì)于另一個(gè)字體大小指出這個(gè)字體有多大。因此，font-size: 150%;，說明這個(gè)字體大小應(yīng)當(dāng)是另一個(gè)字體大小的150%。不過，是另外哪一個(gè)字體大小呢？嗯，由于font-size是從父元素繼承的一個(gè)屬性，指定一個(gè)百分?jǐn)?shù)字體大小時(shí)，就是相對(duì)于父元素的字體大小。 下面來看這是如何工作的：

這里按像素指定了body的字體大小，并把一級(jí)標(biāo)題的大小指定為150%。

em 還可以使用em指定字體大小，類似于百分?jǐn)?shù)，這也是一個(gè)相對(duì)度量單位。使用em時(shí)，不是指定一個(gè)百分?jǐn)?shù)。而是要指定一個(gè)比例因子。可以這樣使用em：

假設(shè)你使用這種度量來指定<h2>標(biāo)題的大小。<h2>標(biāo)題的大小將是父元素字體大小的1.2倍，在這里就是1.2乘以14px，大約17px(實(shí)際上是16.8，不過大多數(shù)瀏覽器會(huì)把它四舍五入為17)。

關(guān)鍵字 還要一種指定字體大小的方法：關(guān)鍵字。可以把一個(gè)字體大小指定為xx-small，x-small，small，medium，large，x-large或xx-large，瀏覽器會(huì)把這些關(guān)鍵字轉(zhuǎn)換為像素值，它會(huì)使用瀏覽器中定義的默認(rèn)值來完成這個(gè)轉(zhuǎn)換。 各個(gè)關(guān)鍵字對(duì)應(yīng)的大小通常有以下關(guān)系。每個(gè)大小大約比前一個(gè)大小大20%，small通常定義為大約12像素。不過，要記住，各個(gè)瀏覽器中這些關(guān)鍵字的定義并不一定相同，如果用戶愿意，他們還可能重新給出他們自己的定義。可以這樣使用關(guān)鍵字：

大多數(shù)瀏覽器中，這會(huì)使體文本大小約為12像素。

我們到底該如何指定字體大小呢？

指定字體大小確實(shí)有很多選擇：px，em，百分?jǐn)?shù)和關(guān)鍵字。你要使用哪一個(gè)呢？下面給出指定字體大小的一個(gè)小秘訣，利用這個(gè)秘訣，可以在大多數(shù)瀏覽器中得到一致的結(jié)果。

下面來看這是如何工作的。首先，為你的<body>元素設(shè)置一個(gè)大小。然后，相對(duì)于這個(gè)大小設(shè)置所有其他字體大小，就像這樣：

注意：如果使用像素指定字體大小，老版本的IE將不支持文本縮放。很遺憾，如果用戶使用老版本的IE，倘若你的字體大小使用像素指定的，這些用戶就無法調(diào)整字體的大小。這正是我們不建議按像素指定字體大小的一個(gè)原因。如果你使用像素，對(duì)于部分用戶來說，頁面的可用性會(huì)降低，盡管這種情況可能不會(huì)持續(xù)太久，因?yàn)橛脩粢呀?jīng)陸續(xù)開始對(duì)他們的瀏覽器進(jìn)行升級(jí)。 幸運(yùn)的是，如果你遵循前面的秘訣，提供一個(gè)關(guān)鍵字來定義頁面體的字體大小，再使用em或百分?jǐn)?shù)為其他元素指定相對(duì)大小，這樣當(dāng)要求瀏覽器放大或縮小文本時(shí)，IE也能正確地縮放你的字體。 現(xiàn)在我們來看下面的問題：

改變字體粗細(xì)

font-weight屬性允許你控制文本的粗細(xì)。我們知道，粗體文本看起來比正常文本更深，而且往往要“胖”一點(diǎn)。可以將元素的font-weight屬性設(shè)置為bold，來使用粗體文本，如下所示：

也可以反過來。如果一個(gè)元素默認(rèn)地設(shè)置為bold，或者從父元素繼承了粗體，可以如下去掉粗體樣式：

還要兩個(gè)相對(duì)font-weight屬性：bolder和lighter。使用這兩個(gè)屬性值時(shí)，會(huì)相對(duì)于所繼承的值使文本樣式稍粗一些或者稍細(xì)一些。這些值很少使用，因?yàn)闆]有多少字體支持粗細(xì)程度的微小差別，實(shí)際上這兩個(gè)值通常沒有任何效果。 還可以把font-weight屬性設(shè)置為100到900之間的一個(gè)數(shù)(100的倍數(shù))，不過同樣的，這個(gè)特性也未得到字體和瀏覽器的廣泛支持，所以通常并不使用。

為字體增加風(fēng)格

斜體文本是傾斜的，有時(shí)還有額外的彎曲襯線。在CSS中可以使用font-style屬性為文本增加斜體風(fēng)格，如font-style: italic;，不過，并不是所有字體都支持斜體風(fēng)格(italic)，所以你得到的實(shí)際上稱為傾斜(oblique)文本，傾斜文本也是傾斜的，不過這種字體并不是使用一組專門設(shè)計(jì)的傾斜字符，而是由瀏覽器將正常文字傾斜。故，也可以使用font-style屬性得到傾斜文本，如：font-style: oblique;。 實(shí)際上你會(huì)發(fā)現(xiàn)，取決于你選擇的字體和瀏覽器，有時(shí)這兩種風(fēng)格看起來是一樣的，有時(shí)則不同。所以，除非確實(shí)非得區(qū)分斜體和傾斜文本，這對(duì)你非常重要，否則完全可以任選一種使用。如果確實(shí)很重要，你就需要對(duì)不同的字體和瀏覽器組合進(jìn)行測試，來得到最佳效果。 小結(jié)：

為字體增加顏色樣式

Web顏色概述

首先，我們需要知道Web顏色是如何工作的？我們已經(jīng)看到頁面上很多地方都可以加顏色：背景顏色、邊框顏色和字體顏色。不過，這些顏色在計(jì)算機(jī)上究竟是如何工作的？下面來看一下。 Web顏色是按構(gòu)成顏色的紅、綠、藍(lán)三個(gè)分量所占數(shù)量來指定的。每種顏色會(huì)分別指定一個(gè)從0到100%的數(shù)值，然后把它們混合起來得到最終的顏色。例如，如果把紅色100%、綠色100%和藍(lán)色100%混合在一起，就會(huì)得到白色。注意，在計(jì)算機(jī)屏幕上，將顏色混合在一起會(huì)得到一種更亮的顏色。畢竟，光就是混合而成的！ 不過，如果每個(gè)顏色分量(紅、綠和藍(lán))不是100%，比如只是60%，會(huì)得到什么顏色呢？不太白，是嗎？換句話說，你會(huì)得到一個(gè)灰色，因?yàn)槲覀內(nèi)匀皇菍⑦@三種顏色等量相加，不過沒有那么多光發(fā)送到屏幕上。 或者，假設(shè)把紅色80%和綠色40%混合在一起。你覺得會(huì)得到一個(gè)橙色，是嗎？嗯，你說的沒錯(cuò)，確實(shí)是一個(gè)橙色。注意，如果一個(gè)顏色分量為0，它不會(huì)影響另外兩個(gè)顏色分量。同樣的，這是因?yàn)闆]有藍(lán)光與紅光和綠光混合。 那么，如果紅、綠和藍(lán)色都是0%，混合在一起會(huì)得到什么？這說明，根本沒有向屏幕發(fā)送任何光，所以會(huì)得到黑色。

如何指定Web顏色？

為什么我要知道這些“顏色理論”？我直接按名字指定顏色不就行了嗎？比如”red“、”green“或”blue“，不行嗎？我們當(dāng)然可以使用喜歡的顏色名，不過CSS只定義了大約150個(gè)顏色名。但我們會(huì)告訴你另外一種指定顏色的方法，允許你指定遠(yuǎn)遠(yuǎn)不止150種顏色。事實(shí)上，你可以使用一個(gè)包含1600萬種顏色的調(diào)色板。 CSS提供了很多種指定顏色的方法。你可以指定顏色名，或者按紅、綠、藍(lán)相對(duì)百分比指定顏色，也可以使用一個(gè)十六進(jìn)制碼指定顏色，這是描述顏色紅、綠、藍(lán)分量的一種簡寫形式。不過，到目前為止，十六進(jìn)制碼是指定Web顏色最為常用的方法。但要記住，所有這些指定顏色的方法最終都是要告訴瀏覽器：一個(gè)顏色中紅、綠、藍(lán)分量分別是多少。 下面分別介紹在CSS中指定顏色的各種方法。

按名指定顏色

要在CSS中描述顏色，最直接的方法就是使用顏色名。有16種基本顏色和150種擴(kuò)展顏色可以采用這種方法指定。假設(shè)你希望指定“silver”作為一個(gè)body元素的背景色，可以在CSS中這樣寫：

所以，按名指定一個(gè)顏色時(shí)，只需要輸入顏色名作為相應(yīng)的屬性值。CSS顏色名是不區(qū)分大小寫的，所以輸入silver，Silver或SILVER都是允許的。要記住，這些顏色名只是預(yù)定義了紅、綠、藍(lán)三種顏色分量的多少。

用紅、綠、藍(lán)值指定顏色

還可以按紅、綠、藍(lán)分量的多少來指定一個(gè)顏色。所以，假設(shè)你希望指定橙色作為一個(gè)body元素的背景色，它由紅色80%，綠色40%和藍(lán)色0%構(gòu)成。可以這樣做：

還可以將紅、綠、藍(lán)值指定為0到255之間的一個(gè)數(shù)值。所以不用指定為紅色80%，綠色40%和藍(lán)色0%，可以使用紅色204(255的80%)，綠色102(255的40%)，藍(lán)色0(255的0%)來指定。可以如下直接使用數(shù)值指定顏色：

注意：在小括號(hào)里直接指定數(shù)值而不是百分?jǐn)?shù)，不要加%。 下面我們來解決以下問題：

使用十六進(jìn)制碼指定顏色

一個(gè)十六進(jìn)制碼中，每組2位數(shù)字分別代表顏色的紅、綠、藍(lán)分量。所以前兩位數(shù)字表示紅色，接下來兩位表示綠色，最后兩位表示藍(lán)色，就像這樣：#cc6600。十六進(jìn)制碼總是以#開頭。 下面，我們來分解一個(gè)十六進(jìn)制碼指定的顏色：

現(xiàn)在得到了各個(gè)分量的數(shù)值，準(zhǔn)確地知道了這個(gè)顏色中紅、綠、藍(lán)各有多少。

小結(jié)：

現(xiàn)在我們已經(jīng)掌握了指定顏色的多種不同的方法。以我們的橙色為例，它由紅色80%，綠色40%和藍(lán)色0%組成。在CSS中，可以采用任何一種方法指定這個(gè)顏色：

現(xiàn)在，我們來回答兩個(gè)問題：

關(guān)于文本裝飾

文本裝飾允許你為文本增加一些裝飾性的效果，如下劃線、上劃線和刪除線。要增加一個(gè)文本裝飾，只需設(shè)置元素的text-decoration屬性。就像這樣：

這個(gè)規(guī)則會(huì)使<em>元素上有一個(gè)從文本中間穿過的橫線。 一次可以設(shè)置多個(gè)裝飾。假如你想同時(shí)對(duì)一個(gè)元素加下劃線和上劃線，可以如下指定文本裝飾：

這個(gè)規(guī)則使得<em>元素有一個(gè)下劃線和一個(gè)上劃線。 如果文本繼承了你不想要的文本裝飾，可以使用值“none”來去去除裝飾：

利用這個(gè)規(guī)則，<em>元素將沒有任何裝飾。

現(xiàn)在，我們來回答以下三個(gè)問題：

如果我們不想用下劃線來裝飾文本，那么可以使用邊框。如在<h1>和<h2>元素下面增加一個(gè)下邊框：

現(xiàn)在<h1>和<h2>元素下面有一個(gè)下邊框，而不是下劃線。 注意：這些下邊框一直延伸到頁面邊緣，而不只是在文本下面出現(xiàn)。