在網頁中文字作為信息的主要載體，非常重要，之前學習過HTML中關於文本、段落等格式的知識，這些只是簡單排版，如果想製作更好看的文本樣式，就的使用css 字體和文本樣式了。

css字體

css 字體屬性主要包括字體系列、字體大小、字體風格等其它樣式。

1、設置字體系列 —— font-family

這個屬性用來設置網頁使用哪種類型的字體顯示文本，語法如下：

"字體1"，"字體2"，"字體3"...

font-family 屬性可以定義多個字體，瀏覽器會從前到後優先選擇使用字體，當瀏覽器不支持第一個字體，則會嘗試使用第二個字體，以此類推。如果瀏覽器不支持所有字體，則使用默認字體。

如下示例：

2、字體樣式—— font-style

字體樣式有三種：

• 正常- 正常顯示文本
• 斜體- 以斜體字顯示的文字
• 傾斜的文字- 文字向一邊傾斜（不管是斜體字還是正常的字體）

如下示例：

這裡有2種斜體，它們有什麼區別？

italic 和 oblique 都是向右傾斜的文字, 但區別在於 italic 是指斜體字，而 oblique 是傾斜的文字，對於沒有斜體的字體應該使用 oblique 屬性值來實現傾斜的文字效果。

3、字體大小 —— font-size

“font- size”屬性來設置字體大小，它的值可以使用預定義關鍵字、絕對大小、相對大小。

預定義關鍵字

預定義關鍵字有xx-small、x-small、small、medium、large、x-large、xx-large，尺寸按順序依次增大。它的可選範圍只有這幾種，且不同瀏覽器廠商定義的預定義關鍵字對應的字體大小不一致，所以相同的屬性值，在不同瀏覽器看到的大小不一樣，建議不要使用這種方式。

絕對大小

絕對大小使用比如：px(像素)、pt(點，1pt 相當於1/72in)、in(英寸)、cm(厘米)、mm(毫米)等單位設置字體大小。

如下示例：

絕對大小不會隨著頁面大小改變而改變，如果要想使文字大小自適應不同的屏幕或設備就需要使用相對大小。

相對大小：

相對大小使用em、%、rem等來設置大小，它們都是相對於某個參考基準的字體大小，來計算當前字體的大小，只是參考基準不同而已。

如果你不指定一個字體的大小，默認大小和普通文本段落一樣，是16像素（1em = 16px,100%= 16px）。

em和%都是相對於父級元素的字體大小，其子級元素會在其父級元素的計算結果上繼續計算大小，如下示例：

如上p元素的字體大小是36px，而不是12px * 200%等於24px，它是在其父級div元素的計算結果上繼續計算的值。

使用em 或%雖然可以方便修改文字大小，但是當元素嵌套很深的時候，就變得比較複雜，深層的元素文字大小就變得不可控，所以css3新增加了rem 來設置字體大小。

rem 是相對於根元素 （html 元素） font-size屬性的值，每一層級都會參考html根元素的字體大小來計算，這樣一來，無論嵌套多少層，字體大小的計算就變得統一了。

rem 是CSS3新增的一個相對單位，IE9 以下版本的老瀏覽器卻不支持它，這也是很多編程人員尚未使用 rem 的原因。

在定義字體大小時，建議在html 元素中定義絕大多數元素所需要的字體大小，並讓所有子元素繼承html 的字體大小。如果某個子元素要改變字體大小，則使用相對尺寸 em 或 % 或 rem 重新定義。

4、複合屬性—— font

font 屬性可以看成是字體的簡寫，它可以定義字體系列、大小、風格、粗細、等樣式，語法如下：

 font："font-style font-variant font-weight font-size/line-height font-family"

其中font-size和font-family的值是必需的。如果缺少了其他值，將使用瀏覽器的默認值。

如下示例：

除了以上設置，font還有其它的屬性值，如下：

這些屬性，只有部分瀏覽器支持，具體使用時請查看瀏覽器是否支持。

5、其它字體屬性

字體還有font-weight（設置粗細的屬性）、font-variant（設置小型大寫字母的字體顯示文本）如下示例：

font-weight 字體粗細：有normal、lighter、bold、數值三種，數值範圍從 100 ~ 900 依次變粗，900 相當於 bold。

font-variant值有normal（標準字體顯示）、 small-caps（瀏覽器會顯示小型大寫字母的字體）、inherit （繼承父元素的設置）

如下示例：

font-variant屬性設置小型大寫字母的字體顯示文本，這意味著所有的小寫字母均會被轉換為大寫，但是所有使用小型大寫字體的字母與其余文本相比，其字體尺寸更小。

css 文本樣式

css 文本屬性主要設置比如字符間隔，文本顏色、單詞間隔、行高、文字修飾、對齊方式等效果。

1、文字顏色 —— color

color 使用以“#”開頭16進制的顏色代碼或顏色關鍵詞（如red、blue），如下示例：

2、字符間隔 —— letter-spacing

設置字符水平間距，如下示例：

3、單詞間隔 —— word-spacing

設置單詞之間的間距，如下示例：

這裡註意中文比較特殊，一個中文字不等同於英文的一個單詞。

4、行高 —— line-height

設置字體行之間垂直間距，如下示例：

5、文字修飾 —— text-decoration

可以設置文字下劃線、刪除線等樣式，如下示例：

還可以定義波浪線效果，如下示例：

6、水平對齊 —— text-align

有三種水平方向的對齊方式，居左，居中、居右，如下示例：

7、垂直對齊—— vertical-align

vertical-align屬性設置一個元素的垂直對齊方式。

該屬性定義行內元素的基線相對於該元素所在行的基線的垂直對齊。允許指定負長度值和百分比值。這會使元素降低而不是升高。在表單元格中，這個屬性會設置單元格框中的單元格內容的對齊方式。

如下示例，對齊圖片：

還有很多其它屬性，在此不每個都介紹了，可參考如下：

8、文字大小寫轉換—— text-transform

可用於所有字句變成大寫或小寫字母，或每個單詞的首字母大寫。如下示例：

9、文本縮進 —— text-indent

文本縮進屬性是用來指定文本的第一行的縮進。如下示例：

文本縮進可以使用絕對值如：px、pt、cm等，也可以是相對單位 %。且可以是負值，如果是負值，就相當於變成向左縮進了。

10、空白處理 —— white-space

white-space屬性指定元素內的空白怎樣處理。如下示例：

11、文字陰影 —— text-shadow

text-shadow 可以設置文字陰影效果，比如內陰影或外陰影，語法：

text-shadow: x坐標y坐標模糊大小顏色;

其中x/y 坐標相對於文本左上角的偏移量，如下示例：

12、文本溢出—— text-overflow

text-overflow屬性指定當文本溢出時包含它的元素應該如何顯示。可以設置文本被剪切、顯示省略號 (...) 或顯示自定義字符串（不是所有瀏覽器都支持）。

text-overflow需要配合以下兩個屬性使用：

• overflow: hidden;

如下示例：

總結

本篇講述了文字和文本的大部分樣式設置，掌握這些css用法非常重要，網頁大部分都是文本，要想製作一個漂亮的頁面，這些是必須要學會的，且要學會融會貫通。

本篇主要講了以下內容：

1. 字體系列、大小、樣式、粗細等樣式的設置。
2. 字體font簡寫屬性的使用。
3. 文本顏色、字符間隔、單詞間隔、行高等設置。
4. 文本修飾、大小寫轉換、文本縮進、空白處理等。
5. 文本水平對齊、垂直對齊。
6. 文本陰影及文本溢出。

以上都是最基本的，要多加練習，才能夠理解學會使用。感謝關注，祝學習愉快！

上篇：前端入門——css 盒子模型