字體和文本

字體

網頁中的字體有三個來源。

一、用戶機器中安裝的字體。（直到最近，這些字體仍是能在網頁中放心使用的惟一一批字體。）

二、保存在第三方網站上的字體。最多見的是 Typekit 和 Google，可使用 link 標籤把它們連接到你的頁面上。

三、保存在你的 Web 服務器上的字體。這些字體可使用@font-face 規則隨網頁一塊兒發送給瀏覽器。

如下就是與字體樣式相關的 6 個屬性。

 font-family

 font-size

 font-style

 font-weight

 font-variant

 font（簡寫屬性）

字體族font-family

有哪些通用的字體類呢？有如下幾種：

 serif，也就是襯線字體，在每一個字符筆畫的末端會有一些裝飾線；

 sans-serif，也就是無襯線字體，字符筆畫的末端沒有裝飾線；

 monospace，也就是等寬字體，顧名思義，就是每一個字符的寬度相等（也稱代碼體）；

 cursive，也就是草書體或手寫體

字體大小font-size

font-size 是能夠繼承的。換句話說，改變一個元素的字體大小，可能會致使其子元素字體大小成比例地變化。好比說把 body 元素的 font-size 設定爲 200%，那麼頁面中全部元素的文本都會增大一倍。

1. 絕對字體大小px

2. 相對字體大小em

3. 關於 rem 單位

這個單位可謂集相對大小和絕對大小的優勢於一身，經過它既能夠作到只修改根元素就成比例地調整全部字體大小，又能夠避免字體大小逐層複合的連鎖反應。目前，除了 IE8 及更早版本外，全部瀏覽器均已支持rem。對於不支持它的瀏覽器，應對方法也很簡單，就是多寫一個絕對單位的聲明。這些瀏覽器會忽略用rem 設定的字體大小。

字體樣式font-style

值： italic、 oblique、 normal。

字體粗細font-weight

可能的值： 100、 200……900，或者 lighter、 normal、 bold 和 bolder。

字體變化font-variant

值： small-caps、 normal。

簡寫字體屬性

規則一：必須聲明 font-size 和 font-family 的值。

規則二：全部值必須按以下順序聲明。 

1. font-weight、 font-style、 font-variant 不分前後；

2. 而後是 font-size；

3. 最後是 font-family。

文本屬性

如下是幾個最有用的 CSS 文本屬性：

 text-indent

 letter-spacing

 word-spacing

 text-decoration

 text-align

 line-height

 text-transform

 vertical-align

文本縮進text-indent

值：長度值（正、負都可）。

文本裝飾text-decoration

值： underline、 overline、 line-through、 blink、 none。

文本轉換text-transform

值： none、 uppercase、 lowercase、 capitalize。

垂直對齊vertical-align

值：任意長度值以及 sub、 super、 top、 middle、 bottom 等。

Web 字體大揭祕

目前，使用@font-face 規則在網頁中嵌入可下載字體的 CSS 功能，已經獲得了瀏覽器普遍支持。

@font-face 規則爲設計師提供了系統自帶字體之外的普遍選擇。換句話說，瀏覽器能夠從 Web 服務器下載字體，就意味着沒必要再依賴用戶機器中的字體，並且也能夠確保用戶可以看到 CSS 中設定的字體。

設定 Web 字體的方式有如下三種。

一、使用 Google Web Fonts 或 Adobe 的 Typekit 等公共字體庫。

二、使用事先打好包的@font-face 包。

三、使用 Font Squirrel 用你本身的字體生成@font-face 包。