文字、字型樣式
目錄
- 文字方向
CSS 字型樣式
- font
簡寫屬性，把所有針對字型的屬性設定在一個申明中
定義和用法
font 簡寫屬性在一個宣告中設定所有字型屬性。
註釋：此屬性也有第六個值："line-height"，可設定行間距。
說明
這個簡寫屬性用於一次設定元素字型的兩個或更多方面。使用 icon 等關鍵字可以適當地設定元素的字型，使之與使用者計算機環境中的某個方面一致。注意，如果沒有使用這些關鍵詞，至少要指定字型大小和字體系列。
可以按順序設定如下屬性：
- font-style
- font-variant
- font-weight
- font-size/line-height
- font-family
可以不設定其中的某個值，比如 font:100% verdana; 也是允許的。未設定的屬性會使用其預設值。
值 描述 font-style 規定字型樣式。normal - 文字正常顯示；italic - 文字斜體顯示；oblique - 文字傾斜顯示 font-variant 規定字型異體。small-caps; font-weight 規定字型粗細。normal - 文字正常顯示；bold - 粗體字元；bolder-更粗字元；lighter- 更細文字；100-900，自定義字元粗細。 font-size/line-height 規定字型尺寸和行高。 font-family 規定字體系列。 caption 定義被標題控制元件（比如按鈕、下拉列表等）使用的字型。 icon 定義被圖示標記使用的字型。 menu 定義被下拉列表使用的字型。 message-box 定義被對話方塊使用的字型。 small-caption caption 字型的小型版本。 status-bar 定義被視窗狀態列使用的字型 <html> <head> <style type="text/css"> p.ex1 { font:italic arial,sans-serif; } p.ex2 { font:italic bold 12px/30px arial,sans-serif; } </style> </head> <body> <p class="ex1">This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph.</p> <p class="ex2">This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph.</p> </body> </html>
- font-family
font-family 規定元素的字體系列。
font-family 可以把多個字型名稱作為一個“回退”系統來儲存。如果瀏覽器不支援第一個字型，則會嘗試下一個。也就是說，font-family 屬性的值是用於某個元素的字型族名稱或/及類族名稱的一個優先表。瀏覽器會使用它可識別的第一個值。
有兩種型別的字體系列名稱：
- 指定的系列名稱：具體字型的名稱，比如："times"、"courier"、"arial"。
- 通常字體系列名稱：比如："serif"、"sans-serif"、"cursive"、"fantasy"、"monospace"
提示：使用逗號分割每個值，並始終提供一個類族名稱作為最後的選擇。
注意：使用某種特定的字體系列（Geneva）完全取決於使用者機器上該字體系列是否可用；這個屬性沒有指示任何字型下載。因此，強烈推薦使用一個通用字體系列名作為後路。
/*單個字型指定 */ h1 {font-family: Georgia;} /*多個字型進行備用 */ p { /* 按順序進行查詢，若找到則按照找到的字型進行輸出*/ font-family: Times, TimesNR, 'New Century Schoolbook', Georgia, 'New York', serif; }使用引號
您也許已經注意到了，上面的例子中使用了單引號。只有當字型名中有一個或多個空格（比如 New York），或者如果字型名包括 # 或 $ 之類的符號，才需要在 font-family 宣告中加引號。
單引號或雙引號都可以接受。但是，如果把一個 font-family 屬性放在 HTML 的 style 屬性中，則需要使用該屬性本身未使用的那種引號：
<p style="font-family: Times, TimesNR, 'New Century Schoolbook', Georgia, 'New York', serif;">...</p>
- font-style
font-style 屬性定義字型的風格。
該屬性設定使用斜體、傾斜或正常字型。斜體字型通常定義為字體系列中的一個單獨的字型。
理論上講，使用者代理可以根據正常字型計算一個斜體字型。
該屬性有三個值：
- normal - 文字正常顯示
- italic - 文字斜體顯示
- oblique - 文字傾斜顯示
p.normal {font-style:normal;} p.italic {font-style:italic;} p.oblique {font-style:oblique;}
italic 和 oblique 的區別
font-style 非常簡單：用於在 normal 文字、italic 文字和 oblique 文字之間選擇。唯一有點複雜的是明確 italic 文字和 oblique 文字之間的差別。
斜體（italic）是一種簡單的字型風格，對每個字母的結構有一些小改動，來反映變化的外觀。 傾斜（oblique）文字則是正常豎直文字的一個傾斜版本。
通常情況下，italic 和 oblique 文字在 web 瀏覽器中看上去完全一樣。
- font-variant
font-variant屬性可以設定小型大寫字母。
font-variant 屬性設定小型大寫字母的字型顯示文字，這意味著所有的小寫字母均會被轉換為大寫，但是所有使用小型大寫字型的字母與其餘文字相比，其字型尺寸更小。
<!-- html檔案 --> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style type="text/css"> p {font-variant:small-caps;} </style> </head> <body> <p>font-variant:small-caps</p> </body> </html>
- font-weight
使用 bold 關鍵字可以將文字設定為粗體。
關鍵字 100 ~ 900 為字型指定了 9 級加粗度。如果一個字型內建了這些加粗級別，那麼這些數字就直接對映到預定義的級別，100 對應最細的字型變形，900 對應最粗的字型變形。數字 400 等價於 normal，而 700 等價於 bold。
如果將元素的加粗設定為 bolder，瀏覽器會設定比所繼承值更粗的一個字型加粗。與此相反，關鍵詞 lighter 會導致瀏覽器將加粗度下移而不是上移。
p.normal {font-weight:normal;} p.thick {font-weight:bold;} p.thicker {font-weight:900;}
- font-size
font-size屬性設定文字的大小。
有能力管理文字的大小在 web 設計領域很重要。但是，您不應當通過調整文字大小使段落看上去像標題，或者使標題看上去像段落。
請始終使用正確的 HTML 標題，比如使用 <h1> - <h6> 來標記標題，使用 <p> 來標記段落。
font-size 值可以是絕對或相對值。
絕對值：
- 將文字設定為指定的大小
- 不允許使用者在所有瀏覽器中改變文字大小（不利於可用性）
- 絕對大小在確定了輸出的物理尺寸時很有用
相對大小：
- 相對於周圍的元素來設定大小
- 允許使用者在瀏覽器改變文字大小
注意：如果您沒有規定字型大小，普通文字（比如段落）的預設大小是 16 畫素 (16px=1em)。
使用畫素來設定字型大小
通過畫素設定文字大小，可以對文字大小進行完全控制：
h1 {font-size:60px;} h2 {font-size:40px;} p {font-size:14px;}使用 em 來設定字型大小
如果要避免在 Internet Explorer 中無法調整文字的問題，許多開發者使用 em 單位代替 pixels。
W3C 推薦使用 em 尺寸單位。
1em 等於當前的字型尺寸。如果一個元素的 font-size 為 16 畫素，那麼對於該元素，1em 就等於 16 畫素。在設定字型大小時，em 的值會相對於父元素的字型大小改變。
瀏覽器中預設的文字大小是 16 畫素。因此 1em 的預設尺寸是 16 畫素。
可以使用下面這個公式將畫素轉換為 em：pixels/16=em
（注：16 等於父元素的預設字型大小，假設父元素的 font-size 為 20px，那麼公式需改為：pixels/20=em）
h1 {font-size:3.75em;} /* 60px/16=3.75em */ h2 {font-size:2.5em;} /* 40px/16=2.5em */ p {font-size:0.875em;} /* 14px/16=0.875em */結合使用百分比和 EM
在所有瀏覽器中均有效的方案是為 body 元素（父元素）以百分比設定預設的 font-size 值：
body {font-size:100%;} h1 {font-size:3.75em;} h2 {font-size:2.5em;} p {font-size:0.875em;}
CSS文字屬性
| 屬性 | 描述 |
|---|---|
| color | 設定文字顏色 |
| direction | 設定文字方向。 |
| line-height | 設定行高。 |
| letter-spacing | 設定字元間距。 |
| text-align | 對齊元素中的文字。 |
| text-decoration | 向文字新增修飾。 |
| text-indent | 縮排元素中文字的首行。 |
| text-shadow | 設定文字陰影。CSS2 包含該屬性，但是 CSS2.1 沒有保留該屬性。 |
| text-transform | 控制元素中的字母。 |
| unicode-bidi | 設定文字方向。 |
| white-space | 設定元素中空白的處理方式。 |
| word-spacing |
設定字間距。 |
- 縮排文字 test-indent
test-indent，該屬性可以方便地實現文字縮排。
通過使用 text-indent 屬性，所有元素的第一行都可以縮排一個給定的長度，甚至該長度可以是負值。
這個屬性最常見的用途是將段落的首行縮排，下面的規則會使所有段落的首行縮排 5 em：
p {text-indent: 5em;}注意：一般來說，可以為所有塊級元素應用 text-indent，但無法將該屬性應用於行內元素，影象之類的替換元素上也無法應用 text-indent 屬性。不過，如果一個塊級元素（比如段落）的首行中有一個影象，它會隨該行的其餘文字移動。
提示：如果想把一個行內元素的第一行“縮排”，可以用左內邊距或外邊距創造這種效果。
使用負值
text-indent 還可以設定為負值。利用這種技術，可以實現很多有趣的效果，比如“懸掛縮排”，即第一行懸掛在元素中餘下部分的左邊：
p {text-indent: -5em;}不過在為 text-indent 設定負值時要當心，如果對一個段落設定了負值，那麼首行的某些文字可能會超出瀏覽器視窗的左邊界。為了避免出現這種顯示問題，建議針對負縮排再設定一個外邊距或一些內邊距：
p {text-indent: -5em; padding-left: 5em;}
使用百分比值
text-indent 可以使用所有長度單位，包括百分比值。
百分數要相對於縮排元素父元素的寬度。換句話說，如果將縮排值設定為 20%，所影響元素的第一行會縮排其父元素寬度的 20%。
在下例中，縮排值是父元素的 20%，即 100 個畫素：
div {width: 500px;} p {text-indent: 20%;} <div> <p>this is a paragragh</p> </div>
繼承
text-indent 屬性可以繼承，請考慮如下標記：
div#outer {width: 500px;} div#inner {text-indent: 10%;} p {width: 200px;} <div id="outer"> <div id="inner">some text. some text. some text. <p>this is a paragragh.</p> </div> </div>以上標記中的段落也會縮排 50 畫素，這是因為這個段落繼承了 id 為 inner 的 div 元素的縮排值。
- 水平對齊 text-align
text-align是一個基本的屬性，它會影響一個元素中的文字行互相之間的對齊方式。
值 現象 left 左對齊 right 右對齊 center 居中 西方語言都是從左向右讀，所有 text-align 的預設值是 left。
文字在左邊界對齊，右邊界呈鋸齒狀（稱為“從左到右”文字）。
對於希伯來語和阿拉伯語之類的的語言，text-align 則預設為 right，因為這些語言從右向左讀。不出所料，center 會使每個文字行在元素中居中。
提示：將塊級元素或表元素居中，要通過在這些元素上適當地設定左、右外邊距來實現。
- center 與‘ <CENTER>’
您可能會認為 text-align:center 與 <CENTER> 元素的作用一樣，但實際上二者大不相同。
<CENTER> 不僅影響文字，還會把整個元素居中。 text-align 不會控制元素的對齊，而隻影響內部內容。元素本身不會從一段移到另一端，只是其中的文字受影響。
justify
最後一個水平對齊屬性是 justify。
在兩端對齊文字中，文字行的左右兩端都放在父元素的內邊界上。然後，調整單詞和字母間的間隔，使各行的長度恰好相等。您也許已經注意到了，兩端對齊文字在列印領域很常見。
需要注意的是，要由使用者代理（而不是 CSS）來確定兩端對齊文字如何拉伸，以填滿父元素左右邊界之間的空間。
- 字間隔（詞間距） word-spacing
改變字（單詞）之間的標準間隔。其預設值 normal 與設定值為 0 是一樣的。
word-spacing 屬性接受一個正長度值或負長度值。
正值 - 遠離 負值 - 靠近
- 字母間隔 letter-spacing
與 word-spacing 的區別在於，字母間隔修改的是字元或字母之間的間隔。
與 word-spacing 屬性一樣，letter-spacing 屬性的可取值包括所有長度。
預設關鍵字是 normal（這與 letter-spacing:0 相同）。
正值 - 遠離 負值 - 靠近
字元轉換text-transform
text-transform 處理文字的大小寫。這個屬性有 4 個值：
- none -對文字不做任何改動，將使用源文件中的原有大小寫
- uppercase- 將文字轉換為全大寫字元
- lowercase - 將文字轉換為全小寫字元
- capitalize - 對每個單詞的首字母大寫
好處：
- 只需寫一個簡單的規則來完成這個修改，而無需修改 h1 元素本身。
- 如果您以後決定將所有大小寫再切換為原來的大小寫，可以更容易地完成修改。
文字裝飾 text-decoration
text-decoration 有 5 個值：
- none - 會關閉原本應用到一個元素上的所有裝飾
- underline - 對元素加下劃線
- overline - 會在文字的頂端畫一個上劃線
- line-through - 在文字中間畫一個貫穿線,等價於 HTML 中的 S 和 strike 元素
- blink - 讓文字閃爍，類似於 Netscape 支援的頗招非議的 blink 標記。
去掉超連結的下劃線，可以使用: a {text-decoration: none;}
注意：如果顯式地用這樣一個規則去掉連結的下劃線，那麼錨與正常文字之間在視覺上的唯一差別就是顏色（至少預設是這樣的，不過也不能完全保證其顏色肯定有區別）。
在一個規則中結合多種裝飾
例：超連結既有下劃線，又有上劃線，則規則如下： a:link a:visited {text-decoration: underline overline;}
不過要注意的是，如果兩個不同的裝飾都與同一元素匹配，勝出規則的值會完全取代另一個值。請考慮以下的規則：
h2.stricken {text-decoration: line-through;} h2 {text-decoration: underline overline;}
對於給定的規則，所有 class 為 stricken 的 h2 元素都只有一個貫穿線裝飾，而沒有下劃線和上劃線.因為 text-decoration 值會替換而不是累積起來。
處理空白符 white-space
white-space會影響到使用者代理對源文件中的空格、換行和 tab 字元的處理。
通過使用該屬性，可以影響瀏覽器處理字之間和文字行之間的空白符的方式。
可以用以下宣告顯式地設定這種預設行為,即丟掉多餘的空白符。如果給定這個值，換行字元（回車）會轉換為空格，一行中多個空格的序列也會轉換為一個空格。：p {white-space: normal;}
值 pre
如果將 white-space 設定為 pre，空白符不會被忽略。
注意：經測試，IE 7 以及更早版本的瀏覽器不支援該值，因此請使用非 IE 的瀏覽器來檢視上面的例項。
值 nowrap
與之相對的值是 nowrap，它會防止元素中的文字換行，除非使用了一個 br 元素。 在 CSS 中使用 nowrap 非常類似於 HTML 4 中用 <td nowrap> 將一個表單元格設定為不能換行，不過 white-space 值可以應用到任何元素。
值 pre-wrap 和 pre-line
pre-wrap，該元素中的文字會保留空白符序列，但是文字行會正常地換行。pre-line，會像正常文字中一樣合併空白符序列，但保留換行符。
注意：我們在 IE7 和 FireFox2.0 瀏覽器中測試了上面的兩個例項，但是結果是，值 pre-wrap 和 pre-line 都沒有得到很好的支援。
總結
下面的表格總結了 white-space 屬性的行為：
值 空白符 換行符 自動換行 pre-line 合併 保留 允許 normal 合併 忽略 允許 nowrap 合併 忽略 不允許 pre 保留 保留 不允許 pre-wrap 保留 保留 允許
文字方向
如果您閱讀的是英文書籍，就會從左到右、從上到下地閱讀，這就是英文的流方向。不過，並不是所有語言都如此。我們知道古漢語就是從右到左來閱讀的，當然還包括希伯來語和阿拉伯語等等。CSS2 引入了一個屬性來描述其方向性。
direction 影響塊級元素中文字的書寫方向、表中列布局的方向、內容水平填充其元素框的方向、以及兩端對齊元素中最後一行的位置。
註釋：對於行內元素，只有當 unicode-bidi 設定為 embed 或 bidi-override 時才會應用 direction 屬性。
direction 屬性有兩個值：ltr 和 rtl。大多數情況下，預設值是 ltr，顯示從左到右的文字。如果顯示從右到左的文字，應使用值 rtl。