設置文本樣式
文本樣式的CSS屬性，這塊內容在CSS3中也不穩定。已經有幾個被廣泛釆用的非常實用的新特性了。也有幾個相當投機性的提案（其前途未卜），它們一般用來處理非常技術的字體排版細節，還不確定是否存在足夠的需求推動這些提案成為標准。也就是說，已經被主流瀏覽器接納的特性會讓處理文本樣式更為靈活和愉悅。
提示
color屬性可以用來設置文本的顏色。
應用基本文本樣式
讓我們來學習如何使用應用基本文本樣式的屬性。
對齊文本
有好幾個屬性可以用來設計文本內容的對齊方式，如下表所示。
對齊屬性
| 屬 性 | 說 明 | 值 |
|---|---|---|
| text-align | 指定文本塊的對齊方式 | start、end、left、right、center、justify |
| text-justify | 如果text-align屬性使用了 justMy值，則該值會用來指定對齊文本的規則 |
text-align屬性相當簡單，不過，需要注意的重要一點是：可以將文本對齊到顯式命名的某個邊界（使用left或者right值），或者對齊到語言本來使用的邊界（使用start和end值）。在處理從右到左的語言時，這是一個非常重要的區別。代碼清單1展示了應用到文本塊的text-align屬性。
代碼清單1 對齊文本
<!DOCTYPE HTML>
<html>
<head>
<title>黃子涵</title>
<meta name="作者" content="黃子涵"/>
<meta name="描述" content="黃子涵是帥哥"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
<style>
#黃子涵 {
width: 400px;
margin: 5px;
padding: 5px;
border: medium double black;
background-color: lightgray;
}
</style>
</head>
<body>
<p id="黃子涵">
煤氣燈不禁影照街里一對蚯蚓，照過以倆心相親一對小情人
<br>
沉默以擁吻抵抗一切的冰與冷，晚意借北風輕輕的飄起長長裙
<br>
多溫馨 心里 風中那笑聲 淌淚，嘗盡了失意的我將一切都褪去
<br>
再到這風中心中竟仿似傷痕累累，然后再記憶起當晚跟你在這里
<br>
相依相擁中交出的心早已失去，失去 已破碎 不可以再追 灑淚
<br>
煤氣燈不禁影照街里一對蚯蚓，照過以倆心相親一對小情人
<br>
多久了，我都沒變，愛你這回事，整整六年
<br>
有一個人能去愛，多珍貴。沒關系你也不用給我機會
<br>
反正我還有一生可以浪費
</p>
<p>
<button>Start</button>
<button>End</button>
<button>Left</button>
<button>Right</button>
<button>Justify</button>
<button>Center</button>
</p>
<script>
var buttons =document.getElementsByTagName("BUTTON");
for(var i = 0; i < buttons.length; i++) {
buttons[i].onclick = function(e) {
document.getElementById("黃子涵").style.textAlign = e.target.innerHTML;
};
}
</script>
</body>
</html>
在這個例子中，我添加了一個簡單的腳本，可以基於被按下的按鈕改變p元素的
text-align屬性的值。下圖展示了text-align屬性取其中兩個值時文本對齊的效果。
如果使用justify值，可以使用
text-justify屬性指定文本添加空白的方式。這個屬性允許的值如下表所示。
text-justify屬性的值
| 值 | 說 明 |
|---|---|
| auto | 瀏覽器選擇對齊規則，這是最簡單的方法，不過，不同瀏覽器之間的呈現方式會有微小差別 |
| none | 禁用文本對齊 |
inter-word |
空白分布在單詞之間，適用於英語等詞間有空的語言 |
inter-ideograph |
空白分布在單詞、表意字之間，且文本兩端對齊，適用於漢語、日文和韓文等語言 |
inter-cluster |
空白分布在單詞、字形集的邊界，適用於泰文等無詞間空格的語言 |
distribute |
空白分布在單詞、字形集的邊界，但連續文本或者草體除外 |
| kashida | 通過拉長選定字符調整對齊方式（僅適用於草體） |
處理空白
空白在HTML文檔中通常是被壓縮或者直接忽略掉。這允許你將HTML文檔的布局跟頁面的外觀分離。代碼清單2展示了一個HTML文檔，其中的文本塊包含了空白。
代碼清單2 帶有空白的HTML文檔
<!DOCTYPE HTML>
<html>
<head>
<title>黃子涵</title>
<meta name="作者" content="黃子涵"/>
<meta name="描述" content="黃子涵是帥哥"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
<style>
#黃子涵 {
width: 400px;
margin: 5px;
padding: 5px;
border: medium double black;
background-color: lightgray;
}
</style>
</head>
<body>
<p id="黃子涵">
煤氣燈 不禁影照街里 一對蚯蚓，照過以倆心相親 一對小情人
沉默以擁吻抵抗 一切的冰與冷，晚意借北風輕輕的飄起長長裙
多溫馨 心里 風中那笑聲 淌淚，嘗盡了失意的我將一切都褪去
再到這風中心中竟仿似 傷痕累累，然后再記憶起當晚跟你在這里
相依相擁中交出的心早已失去，失去 已破碎 不可以再追 灑淚
煤氣燈不禁影照街里一對蚯蚓，照過以倆心相親一對小情人
多久了，我都沒變，愛你這回事，整整六年
有一個人能去愛，多珍貴。沒關系你 也不用給我機會
反正我還有一生可以浪費
</p>
</body>
</html>
在上面的代碼中，文本包含了一些空格、制表符和換行符。瀏覽器遇到多個空格時，會將它們壓縮為一個空格，而換行符等其他空白符則會直接被忽略。瀏覽器會自動處理文本換行，以便各行都能適應元素邊界。瀏覽器如何顯示示例中的文本呢？請看下圖。
瀏覽器的這種處理方式並不總是我們想要的，有時候我們就想在HTML源文檔中保留文本中的空白。這時，可以使用whitespace屬性控制瀏覽器對空白字符的處理方式。這個屬性總結在下表中。
whitespace屬性
| 屬 性 | 說 明 | 值 |
|---|---|---|
| whitespace | 指定空白字符的處理方式 | 表（whitespace屬性的值 ） |
whitespace屬性允許的取值列在了下表中。
whitespace屬性的值
| 值 | 說 明 |
|---|---|
| normal | 默認值，空白符被壓縮，文本行自動換行 |
| nowrap | 空白符被壓縮，文本行不換行 |
| pre | 空白符被保留，文本只在遇到換行符的時候換行，這跟pre元素的效果一樣 |
| pre-line | 空白符被壓縮，文本會在一行排滿或遇到換行符時換行 |
| pre-wrap | 空白符被保留，文本會在一行排滿或遇到換行符時換行 |
代碼清單3演示了whitespace屬性的應用。
代碼清單3 使用whitespace屬性
<!DOCTYPE HTML>
<html>
<head>
<title>黃子涵</title>
<meta name="作者" content="黃子涵"/>
<meta name="描述" content="黃子涵是帥哥"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
<style>
#黃子涵 {
width: 400px;
margin: 5px;
padding: 5px;
border: medium double black;
background-color: lightgray;
white-space: pre-line;
}
</style>
</head>
<body>
<p id="黃子涵">
煤氣燈 不禁影照街里 一對蚯蚓，照過以倆心相親 一對小情人
沉默以擁吻抵抗 一切的冰與冷，晚意借北風輕輕的飄起長長裙
多溫馨 心里 風中那笑聲 淌淚，嘗盡了失意的我將一切都褪去
再到這風中心中竟仿似 傷痕累累，然后再記憶起當晚跟你在這里
相依相擁中交出的心早已失去，失去 已破碎 不可以再追 灑淚
煤氣燈不禁影照街里一對蚯蚓，照過以倆心相親一對小情人
多久了，我都沒變，愛你這回事，整整六年
有一個人能去愛，多珍貴。沒關系你 也不用給我機會
反正我還有一生可以浪費
</p>
</body>
</html>
pre-line值的效果如下圖所示。為了讓內容適應元素，瀏覽器對文本進行了換行，但是保留了換行符（即斷行）。
提示
CSS3文本模塊將whitespace定義為另外兩個屬性的簡寫屬性：bikeshedding和
text-wrap。這兩個屬性都還沒有實現，bikeshedding屬性的定義還不完備（其中的一大問題是應該給 它取個更直觀的名字）。
指定文本方向
direction屬性告訴瀏覽器文本塊的排列方向，如下表所示。
direction屬性
屬 性 | 說 明 | 值
direction | 設置文本方向 | ltr、rtl
代碼清單4列出了direction屬性的一個簡單應用。
代碼清單4 使用direction屬性
<!DOCTYPE HTML>
<html>
<head>
<title>黃子涵</title>
<meta name="作者" content="黃子涵"/>
<meta name="描述" content="黃子涵是帥哥"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
<style>
#huangzihan1 {
direction: ltr;
}
#huangzihan2 {
direction: rtl;
}
</style>
</head>
<body>
<p id="huangzihan1">
煤氣燈不禁影照街里一對蚯蚓，照過以倆心相親一對小情人
</p>
<p id="huangzihan2">
相依相擁中交出的心早已失去，失去已破碎不可以再追灑淚
</p>
</body>
</html>
這個屬性的效果如下圖所示。
警告
direction屬性已經從相關CSS模塊的最新草案中移除了，不過也沒給出具體的原因，說不定在模塊最終完善之前還能恢復。
指定單詞、字母、行之間的間距
可以告訴瀏覽器單詞與單詞、字母與字母、行與行之間的間距。相關屬性列在了下表中。
間距屬性
| 屬 性 | 說 明 | 值 |
|---|---|---|
letter-spacing |
設置字母之間的間距 | normal <長度值> |
word-spacing |
設置單詞之間的間距 | Normal <長度值> |
line-height |
設置行高 | Normal <數值> <長度值> <%> |
代碼清單5展示了將這三個屬性應用到一個文本塊上。
代碼清單5 使用letter-spacing、word-spacing和line-height屬性
<!DOCTYPE HTML>
<html>
<head>
<title>黃子涵</title>
<meta name="作者" content="黃子涵"/>
<meta name="描述" content="黃子涵是帥哥"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
<style>
#黃子涵 {
width: 400px;
margin: 5px;
padding: 5px;
border: medium double black;
background-color: lightgray;
word-spacing: 10px;
letter-spacing: 2px;
line-height: 3em;
}
</style>
</head>
<body>
<p id="黃子涵">
煤氣燈 不禁影照街里 一對蚯蚓，照過以倆心相親 一對小情人
沉默以擁吻抵抗 一切的冰與冷，晚意借北風輕輕的飄起長長裙
多溫馨 心里 風中那笑聲 淌淚，嘗盡了失意的我將一切都褪去
再到這風中心中竟仿似 傷痕累累，然后再記憶起當晚跟你在這里
相依相擁中交出的心早已失去，失去 已破碎 不可以再追 灑淚
煤氣燈不禁影照街里一對蚯蚓，照過以倆心相親一對小情人
多久了，我都沒變，愛你這回事，整整六年
有一個人能去愛，多珍貴。沒關系你 也不用給我機會
反正我還有一生可以浪費
</p>
</body>
</html>
這三個屬性的效果如下圖所示。
控制斷詞
word-wrap屬性告訴瀏覽器當一個單詞的長度超出包含塊的寬度時如何處理。這個屬性允許的值列在了下表中。
word-wrap屬性的值
| 值 | 說 明 |
|---|---|
| normal | 單詞不斷開，即使無法完全放入包含塊元素 |
| break-word | 斷開單詞，使其放入包含塊元素 |
代碼清單6展示了
word-wrap屬性的應用。
代碼清單6 使用word-wrap屬性
<!DOCTYPE HTML>
<html>
<head>
<title>黃子涵</title>
<meta name="作者" content="黃子涵"/>
<meta name="描述" content="黃子涵是帥哥"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
<style>
p {
width: 400px;
margin: 5px;
padding: 5px;
border: medium double black;
background-color: lightgray;
float: left;
}
#huangzihan1 {
word-wrap: break-word;
}
#huangzihan2 {
word-wrap: normal;
}
</style>
</head>
<body>
<p id="huangzihan1">
煤氣燈 不禁影照街里 一對蚯蚓，照過以倆心相親 一對小情人
沉默以擁吻抵抗 一切的冰與冷，晚意借北風輕輕的飄起長長裙
這里隱藏着世界上最長的單詞：lopadotemachoselachogaleokranioleipsanodrimhypotrimmatosilphioparaomelitokatakechymenokichlepikossyphophattoperisteralektryonoptekephalliokigklopeleiolagoiosiraiobaphetraganopterygon
多溫馨 心里 風中那笑聲 淌淚，嘗盡了失意的我將一切都褪去
再到這風中心中竟仿似 傷痕累累，然后再記憶起當晚跟你在這里
</p>
<p id="huangzihan2">
相依相擁中交出的心早已失去，失去 已破碎 不可以再追 灑淚
煤氣燈不禁影照街里一對蚯蚓，照過以倆心相親一對小情人
這里隱藏着世界上最長的單詞：lopadotemachoselachogaleokranioleipsanodrimhypotrimmatosilphioparaomelitokatakechymenokichlepikossyphophattoperisteralektryonoptekephalliokigklopeleiolagoiosiraiobaphetraganopterygon
多久了，我都沒變，愛你這回事，整整六年
有一個人能去愛，多珍貴。沒關系你 也不用給我機會
反正我還有一生可以浪費
</p>
</body>
</html>
上面的代碼中有兩個p元素，我分別為兩個p元素應用了
word-wrap屬性的break-word和normal值。應用這兩個值后的效果如下圖所示。
圖中左邊的p元素使用了
break-word值，因而文本中的長單詞被瀏覽器在合適的位置斷開，能夠完全顯示在p元素中。右邊的p元素使用了normal值，意思是瀏覽器不會斷開長單詞，即使長單詞溢出p元素。
提示
可以使用overflow屬性禁止瀏覽器顯示溢出的文本，不過這樣導致的結果就是直接不顯示超出包含元素的部分。
首行縮進
text-indent屬性用於指定文本塊首行縮進，值可以是長度值，也可以是相對於元素寬度的百分數值。下表總結了這個屬性。
text-indent屬性
| 屬 性 | 說 明 | 值 |
|---|---|---|
| text-indent | 設置文本首行的縮進 | <長度值> <%> |
代碼清單7展示了這個屬性的用法。
代碼清單7 使用text-indent屬性
<!DOCTYPE HTML>
<html>
<head>
<title>黃子涵</title>
<meta name="作者" content="黃子涵"/>
<meta name="描述" content="黃子涵是帥哥"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
<style>
p {
margin: 15px;
padding: 5px;
border: medium double black;
background-color: lightgray;
float: left;
text-indent: 15%;
}
</style>
</head>
<body>
<p id="黃子涵">
煤氣燈 不禁影照街里 一對蚯蚓，照過以倆心相親 一對小情人
沉默以擁吻抵抗 一切的冰與冷，晚意借北風輕輕的飄起長長裙
多溫馨 心里 風中那笑聲 淌淚，嘗盡了失意的我將一切都褪去
再到這風中心中竟仿似 傷痕累累，然后再記憶起當晚跟你在這里
相依相擁中交出的心早已失去，失去 已破碎 不可以再追 灑淚
煤氣燈不禁影照街里一對蚯蚓，照過以倆心相親一對小情人
多久了，我都沒變，愛你這回事，整整六年
有一個人能去愛，多珍貴。沒關系你 也不用給我機會
反正我還有一生可以浪費
</p>
</body>
</html>
縮進設置的顯示效果如下圖所示。
文本裝飾與大小寫轉換
text-decoration和text-transform兩個屬性分別允許我們裝飾文本和轉換文本大小寫。這兩個屬性如下表所述。
文本裝飾和大小寫轉換屬性
屬 性 | 說 明 | 值
text-decoration | 為文本塊應用裝飾效果 | none underline overline line-through blink
text-transform | 為文本塊轉換大小寫 | none capitalize uppercase lowercase
text-decoration屬性為文本塊應用某種效果，如下划線，默認值是none （意思是不應用任何裝飾）。text-transform屬性改變文本塊的大小寫，默認值也是none。下面看一下應用這兩個屬性的示例，如代碼清單8所示。
代碼清單8 使用text-decoration和text-transform屬性
<!DOCTYPE HTML>
<html>
<head>
<title>黃子涵</title>
<meta name="作者" content="黃子涵"/>
<meta name="描述" content="黃子涵是帥哥"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
<style>
p {
border: medium double black;
background-color: lightgray;
text-decoration: line-through;
text-transform: uppercase;
}
</style>
</head>
<body>
<p>
煤氣燈 不禁影照街里 一對蚯蚓，照過以倆心相親 一對小情人
沉默以擁吻抵抗 一切的冰與冷，晚意借北風輕輕的飄起長長裙
多溫馨 心里 風中那笑聲 淌淚，嘗盡了失意的我將一切都褪去
再到這風中心中竟仿似 傷痕累累，然后再記憶起當晚跟你在這里
相依相擁中交出的心早已失去，失去 已破碎 不可以再追 灑淚
煤氣燈不禁影照街里一對蚯蚓，照過以倆心相親一對小情人
多久了，我都沒變，愛你這回事，整整六年
有一個人能去愛，多珍貴。沒關系你 也不用給我機會
反正我還有一生可以浪費
</p>
</body>
</html>
text-decoration屬性使用了line-through值，text-transform屬性使用了uppercase值，效果如下圖所示。
提示
應該謹慎使用
text-decoration屬性的blick值。它產生的效果一般比較惱人，尤其是用戶長時間使用頁面的情況。如果想抓住用戶的注意力，建議你找一下其他刺激性較小的方式。
創建文本陰影
為元素創建陰影，我們也可以使用
text-shadow屬性為文本創建陰影效果。這個屬性總結在下表中。
text-shadow屬性
| 屬 性 | 說 明 | 值 |
|---|---|---|
| text-shadow | 為文本塊應用陰影 | <h-shadow> <v-shadow> <blur> <color> |
h-shadow和v-shadow值分別指定陰影的水平偏移和垂直偏移。它們的值用長度值表示，允許負值。blur值也是一個長度值，定義了陰影的模糊程度，該值可選。color值指定陰影的顏色。代碼清單9展示了text-shadow屬性的用法。
代碼清單9 使用text-shadow屬性
<!DOCTYPE HTML>
<html>
<head>
<title>黃子涵</title>
<meta name="作者" content="黃子涵"/>
<meta name="描述" content="黃子涵是帥哥"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
<style>
h1 {
text-shadow: 0.1em .1em 1px lightgrey;
}
p {
text-shadow: 5px 5px 20px black;
}
</style>
</head>
<body>
<h1>黃子涵</h1>
<p>
煤氣燈 不禁影照街里 一對蚯蚓，照過以倆心相親 一對小情人
沉默以擁吻抵抗 一切的冰與冷，晚意借北風輕輕的飄起長長裙
多溫馨 心里 風中那笑聲 淌淚，嘗盡了失意的我將一切都褪去
再到這風中心中竟仿似 傷痕累累，然后再記憶起當晚跟你在這里
相依相擁中交出的心早已失去，失去 已破碎 不可以再追 灑淚
煤氣燈不禁影照街里一對蚯蚓，照過以倆心相親一對小情人
多久了，我都沒變，愛你這回事，整整六年
有一個人能去愛，多珍貴。沒關系你 也不用給我機會
反正我還有一生可以浪費
</p>
</body>
</html>
我為本例中的文本應用了兩種不同的陰影，效果如下圖所示。注意陰影的形狀跟文本字符的形狀相似，而不是跟包含元素的形狀相似。
使用字體
我們可以對文本進行許多改變，其中最基本的一項就是改變用來顯示字符的字體。下表描述了字體相關屬性。很難實現字體排版方面的平衡，一方面，高級用戶想控制字體排版的方方面面（這樣的人為數不少）；另一方面，普通設計師和程序員想簡便快捷地用上一些字體排版特性，同時又不必理會細節。遺憾的是，CSS字體的實現無法滿足任何一方的要求。深入的技術方面基本上還沒有被揭示，而眾所周知的那些東西對主流的設計師和程序員用處又不大。有幾個建議的CSS3模塊能夠增強字體功能，不過它們還只是處於早期階段，沒有吸引任何主流實現。
字體屬性
| 屬 性 | 說 明 | 值 |
|---|---|---|
font-family |
指定文本塊釆用的字體名稱 | |
font-size |
指定文本塊的字體大小 | |
font-style |
指定字體樣式 | Normal italic oblique |
font-variant |
指定字體是否以小型大寫字母顯示 | Normal smallcaps |
font-weight |
設置字體粗細 | Normal bold bolder lighter 100-900之間的數字 |
| font | 在一條聲明中設置字體的簡寫屬性 |
font屬性值的格式如下：
font: <font-style> <font-variant> <font-weight> <font-size> <font-family>
選擇字體
font-family屬性指定使用的字體，按照優先順序排列。瀏覽器從字體列表中的第一種開始嘗試，直到發現合適的字體為止。這種方法很有必要，因為你可以使用用戶安裝在電腦上的字體， 而由於操作系統和偏好不同，不同用戶安裝的字體會有所不同。
當然還有最后的保障：CSS定義了幾種任何情況下都可以使用的通用字體。有幾大類字體，稱為通用字體系列，瀏覽器在呈現這些字體時可能有差異。下表總結了通用字體系列。
通用字體系列
| 通用字體系列 | 實現字體示例 |
|---|---|
| serif | Times |
sans-serif |
Helvetica |
| cursive | Zapf-Chancery |
| fantasy | Western |
| monospace | Courier |
代碼清單10展示了為文本塊應用font-family屬性。
代碼清單10 使用font-family屬性
<!DOCTYPE HTML>
<html>
<head>
<title>黃子涵</title>
<meta name="作者" content="黃子涵"/>
<meta name="描述" content="黃子涵是帥哥"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
<style>
p {
padding: 5px;
border: medium double black;
background-color: lightgrey;
margin: 2px;
float: left;
}
#huangzihan1 {
font-family: SimSun;
}
#huangzihan2 {
font-family: SimHei;
}
#huangzihan3 {
font-family: NSimSun;
}
#huangzihan4 {
font-family: FangSong;
}
#huangzihan5 {
font-family: Microsoft YaHei;
}
</style>
</head>
<body>
<p id="huangzihan1">
煤氣燈不禁影照街里一對蚯蚓，照過以倆心相親一對小情人
沉默以擁吻抵抗一切的冰與冷，晚意借北風輕輕的飄起長長裙
</p>
<p id="huangzihan2">
多溫馨心里風中那笑聲淌淚，嘗盡了失意的我將一切都褪去
再到這風中心中竟仿似傷痕累累，然后再記憶起當晚跟你在這里
</p>
<p id="huangzihan3">
相依相擁中交出的心早已失去，失去已破碎不可以再追灑淚
煤氣燈不禁影照街里一對蚯蚓，照過以倆心相親一對小情人
</p>
<p id="huangzihan4">
多久了，我都沒變，愛你這回事，整整六年
有一個人能去愛，多珍貴。沒關系你也不用給我機會
</p>
<p id="huangzihan5">
反正我還有一生可以浪費
</p>
</body>
</html>
在這個例子中，我為
font-family屬性指定了HelveticaNeue Condensed值，這是Apress出版社使用的字體，並非在所有系統上均可用。另外，我指定通用字monospace作為后備字體，萬一HelveticaNeue Condensed不可用，就可以用monospace。該設置的效果如下圖所示。
上圖中右邊的瀏覽器運行在我用來撰寫本書的電腦上，這台電腦安裝了Apress的字體，因此瀏覽器可以找到HelveticaNeue Condensed字體並使用。左邊的瀏覽器運行在我的測試機上，它並沒有安裝HelveticaNeue Condensed字體，因此它使用了備用monospace字體。
提示
使用后備字體可能發生的一種情況是屏幕上顯示的字體大小不一樣。我們從上面的圖中也可以看到這一點，后備字體要比首選字體大。
font-size-adjust可用來計算調整比例，不過當前只有Firefox支持這一屬性。
設置字體大小
font-size屬性用來指定字體大小。這個屬性允許的值列在了下表中。
font-size屬性的值
| 值 | 說 明 |
|---|---|
xx-small x-small small medium large x-large xx-large |
設置字體大小。瀏覽器會決定每個值代表具體大小。不過，從上到下逐漸增大是有保證的 |
| smaller larger | 設置字體相對於父元素字體的大小 |
<length> |
使用CSS長度值精確設置字體大小 |
| <%> | 將字體大小表示為父元素字體大小的百分數 |
代碼清單11展示
font-size屬性
代碼清單11 使用font-size屬性
<!DOCTYPE HTML>
<html>
<head>
<title>黃子涵</title>
<meta name="作者" content="黃子涵"/>
<meta name="描述" content="黃子涵是帥哥"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
<style>
p {
padding: 5px;
border: medium double black;
background-color: lightgrey;
margin: 2px;
float: left;
}
#huangzihan1 {
font-family: SimSun;
font-size: small;
}
#huangzihan2 {
font-family: SimHei;
font-size: medium;
}
#huangzihan3 {
font-family: NSimSun;
font-size: large;
}
#huangzihan4 {
font-family: FangSong;
font-size: x-large;
}
#huangzihan5 {
font-family: Microsoft YaHei;
font-size: xx-large;
}
</style>
</head>
<body>
<p id="huangzihan1">
煤氣燈不禁影照街里一對蚯蚓，照過以倆心相親一對小情人
沉默以擁吻抵抗一切的冰與冷，晚意借北風輕輕的飄起長長裙
</p>
<p id="huangzihan2">
多溫馨心里風中那笑聲淌淚，嘗盡了失意的我將一切都褪去
再到這風中心中竟仿似傷痕累累，然后再記憶起當晚跟你在這里
</p>
<p id="huangzihan3">
相依相擁中交出的心早已失去，失去已破碎不可以再追灑淚
煤氣燈不禁影照街里一對蚯蚓，照過以倆心相親一對小情人
</p>
<p id="huangzihan4">
多久了，我都沒變，愛你這回事，整整六年
有一個人能去愛，多珍貴。沒關系你也不用給我機會
</p>
<p id="huangzihan5">
反正我還有一生可以浪費
</p>
</body>
</html>
在這個例子中，我應用了三種字體大小聲明。它們在瀏覽器中的呈現效果如下圖所示。
設置字體樣式和粗細
可以使用
font-weight屬性設置字體粗細——增加字體“重量”會使文本更粗。font-style屬性允許我們在正常字體、斜體和假斜體（傾斜字體）三種字體之間選擇。斜體和假斜體有明顯區別，但這是技術上的，通常從文本外觀看來差別很小。代碼清單12展示了這兩個屬性。
代碼清單12 使用font-weight和font-style屬性.
<!DOCTYPE HTML>
<html>
<head>
<title>黃子涵</title>
<meta name="作者" content="黃子涵"/>
<meta name="描述" content="黃子涵是帥哥"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
<style>
p {
padding: 5px;
border: medium double black;
background-color: lightgrey;
margin: 2px;
float: left;
}
#huangzihan1 {
font-family: SimSun;
font-size: small;
font-weight: bold;
font-style: inherit;
}
#huangzihan2 {
font-family: SimHei;
font-size: medium;
font-weight: inherit;
font-style: italic;
}
#huangzihan3 {
font-family: NSimSun;
font-size: large;
font-weight: lighter;
font-style: normal;
}
#huangzihan4 {
font-family: FangSong;
font-size: x-large;
font-weight: normal;
font-style: oblique;
}
#huangzihan5 {
font-family: Microsoft YaHei;
font-size: xx-large;
font-weight: !important;
font-style: !important;
}
</style>
</head>
<body>
<p id="huangzihan1">
煤氣燈不禁影照街里一對蚯蚓，照過以倆心相親一對小情人
沉默以擁吻抵抗一切的冰與冷，晚意借北風輕輕的飄起長長裙
</p>
<p id="huangzihan2">
多溫馨心里風中那笑聲淌淚，嘗盡了失意的我將一切都褪去
再到這風中心中竟仿似傷痕累累，然后再記憶起當晚跟你在這里
</p>
<p id="huangzihan3">
相依相擁中交出的心早已失去，失去已破碎不可以再追灑淚
煤氣燈不禁影照街里一對蚯蚓，照過以倆心相親一對小情人
</p>
<p id="huangzihan4">
多久了，我都沒變，愛你這回事，整整六年
有一個人能去愛，多珍貴。沒關系你也不用給我機會
</p>
<p id="huangzihan5">
反正我還有一生可以浪費
</p>
</body>
</html>
這兩個屬性的呈現效果如下圖所示。
使用Web字體
我之前提到過css字體的一大問題：不能指望用戶的機器上一定安裝了你想使用的字體。解決這個問題的方法是使用Web字體，我們可以直接下載Web字體並使用在自己的頁面上，而不需要用戶做什么。使用
@font-face指定Web字體，如代碼清單13所示。
代碼清單13 使用Web字體
<!DOCTYPE HTML>
<html>
<head>
<title>黃子涵</title>
<meta name="作者" content="黃子涵"/>
<meta name="描述" content="黃子涵是帥哥"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
<style>
@font-face {
font-style: normal;
font-weight: normal;
font-family: 'Droid Sans Fallback';
src: url('http://192.168.1.102/HTML5權威指南/第22章 設置文本樣式/單戀高校.woff');
}
@font-face {
font-style: normal;
font-weight: normal;
font-family: '水果冰淇淋';
src: url('http://192.168.1.102/HTML5權威指南/第22章 設置文本樣式/水果冰淇淋.woff');
}
@font-face {
font-style: normal;
font-weight: normal;
font-family: 'HOPE';
src: url('http://192.168.1.102/HTML5權威指南/第22章 設置文本樣式/HOPE-火柴棍兒.woff');
}
@font-face {
font-style: normal;
font-weight: normal;
font-family: 'AjiwaiPro';
src: url('http://192.168.1.102/HTML5權威指南/第22章 設置文本樣式/原雲涯風味毛筆字體.woff');
}
@font-face {
font-style: normal;
font-weight: normal;
font-family: 'Heiti TC';
src: url('http://192.168.1.102/HTML5權威指南/第22章 設置文本樣式/心版甜妞簡繁.woff');
}
p {
padding: 5px;
border: medium double black;
background-color: lightgrey;
margin: 2px;
float: left;
font-size: xx-large;
}
#huangzihan1 {
font-family: 水果冰淇淋;
}
#huangzihan2 {
font-family: HOPE;
}
#huangzihan3 {
font-family: AjiwaiPro;
}
#huangzihan4 {
font-family: Droid Sans Fallback;
}
#huangzihan5 {
font-family: Heiti TC;
}
</style>
</head>
<body>
<p id="huangzihan1">
煤氣燈不禁影照街里一對蚯蚓，照過以倆心相親一對小情人
沉默以擁吻抵抗一切的冰與冷，晚意借北風輕輕的飄起長長裙
</p>
<p id="huangzihan2">
多溫馨心里風中那笑聲淌淚，嘗盡了失意的我將一切都褪去
再到這風中心中竟仿似傷痕累累，然后再記憶起當晚跟你在這里
</p>
<p id="huangzihan3">
相依相擁中交出的心早已失去，失去已破碎不可以再追灑淚
煤氣燈不禁影照街里一對蚯蚓，照過以倆心相親一對小情人
</p>
<p id="huangzihan4">
多久了，我都沒變，愛你這回事，整整六年
有一個人能去愛，多珍貴。沒關系你也不用給我機會
</p>
<p id="huangzihan5">
反正我還有一生可以浪費
</p>
</body>
</html>
使用
@font-face的時候，需要使用標准字體屬性來描述正在使用的字體。font-family屬性定義字體名稱，用來引用要下載的字體；font-style和font-weight屬性告訴瀏覽器如何設置Web字體的樣式和粗細，也就是說你可以創建斜體和粗體字符；src屬性用來指定字體文件的位置。Web字體有多種格式，但WOFF格式得到了最為廣泛的支持和應用。
提示
一些Web服務器默認情況下不向瀏覽器發送字體文件。你可能需要為服務器配置添加文件類型或者MIME類型。
上述代碼中的Web字體設置效果如下圖所示。
