CSS學習筆記(二) 字體和文本

理解字體和文本屬性，對於創造出專業水準的網頁排版很是重要。一個網站的品質如何，有時候只要看看它用的字體就能一目瞭然。

1.網頁中字體的來源

• 用戶機器中安裝的字體
• 保存在第三方網站上的字體（能夠用link標籤把它們連接到你的頁面上）
• 保存在你的Web服務器上的字體（可使用@font-face規則隨網頁一塊兒發送給瀏覽器）

2.字體和文本的區別

2.1 字體

字體是 文字的不一樣體式 或 字的形體結構。

根據外觀，字體可分爲不一樣的類別（font-collection），包括襯線字體（serif）、無襯線字體（sans-serif）和等寬字體（monospace）。每一類字體能夠分爲不一樣的字體族（font family），好比 Times 和 Helvetica。而字體族中又能夠包含不一樣的字形（font face），反映了相應字體族基本設計的不一樣變化。例如 Times Roman、Times Bold、Helvetica Condensed 和 Bodoni italic。

2.2 文本

文本就是一組字或字符，好比文章標題、段落正文等等，跟使用什麼字體無關。

CSS 爲字體和文本分別定義了屬性。字體屬性主要描述了一類字體的大小和外觀。好比，用了什麼字體族，多大字號，粗體仍是斜體。文本屬性描述了對文本的處理方式。好比，行高或者字符間距多大，有沒有下劃線和縮進。

3. 字體屬性

3.1 字體族 font-family

示例：h2 {font-family:times, serif;}

注意：若是一個字體名多於一個單詞（有空格），應該加上引號。
例如：body {font-family:"trebuchet ms", tahoma, sans-serif;}

3.2 字體大小 font-size

示例：h2 {font-size:18px;}

提示：總的來講，用於設定字體大小的單位有兩種，一種是絕對單位，好比像素或點，另外一種是相對單位，好比百分比或em。（還有一種CSS3新增的rem單位）

3.3 字體樣式 font-style

值：italic、oblique、normal
示例：h2 {font-style:italic;}
說明：

1. italic和oblique都表示斜體；
2. 英文中的斜體主要表示強調。假如你真想表示強調，那在 HTML 標記中直接使用<em>
   標籤便可，由於它默認就是斜體。
3. font-style 有一個 normal 值，中文就是常規的意思。 這個值其實不只 font-style 有，不少其餘屬性也有，它的做用就是取消全部的特殊樣式。這個值是用來有選擇地覆蓋某個默認或你設定的全局屬性的。

3.4 字體粗細 font-weight

可能的值：100、 200……900，或者 lighter、 normal、 bold 和 bolder。
示例： a {font-weight:bold;}
說明：粗體的主要做用是表示重要。實際上， HTML 元素 strong 也表示重要，而它的默認
樣式就是粗體。

3.5 字體變化 font-variant

值： small-caps（將全部小寫字母變成小型大寫字母）、 normal
示例： blockquote {font-variant:small-caps;}
說明：慎用，大寫字母不像小寫字母那樣有上伸部分和下伸部分做爲視覺提示，因此全都使用大寫字母會增長辨識難度。

3.6 簡寫字體屬性 font

示例：

p {font: bold italic small-caps .9em helvetica, arial, sans-serif;}
<p>Here's a piece of text loaded up with every possible font property.</p>

說明：使用這個簡寫形式要遵照兩條規則，不然瀏覽器沒法正確解釋聲明的值。

• 規則一：必須聲明 font-size 和 font-family 的值
• 規則二：全部值必須按以下順序聲明：
  
  
  1. font-weight、 font-style、 font-variant 不分前後；
  2. 而後是 font-size；
  3. 最後是 font-family。

提示：實際上，在設定 font-size 屬性的同時，能夠順便設定 line-height（行高）值。也就是說，字體大小和行高的值能夠寫在一塊，好比 12px/1.5。固然， line-height 是
文本屬性，下一節咱們會講到它。

4.文本屬性

4.1 文本縮進 text-indent

值：長度值（正、負都可）
示例：p {text-indent:3em;}

4.2 字符間距 letter-spacing

值：任何長度值（正、負值都可）。
示例：p {letter-spacing:.2em;}

4.3 單詞間距 word-spacing

值：任何長度值（正、負值都可）。
示例：p {word-spacing:.2em;}

4.4 文本裝飾 text-decoration

值：underline、overline、line-through、blink、none。
示例：.retailprice {text-decoration:line-through;}

4.5 文本對齊 text-align

值：left、right、center、justify
示例：p {text-align:right;}

4.6 行高 line-height

值：任何數字值（不用指定單位）
示例：p {line-height:1.5;}
說明：

1. CSS中的行高平均分佈在一行文本的上方和下方。好比，若是字體大小是12像素，行高是20像素，則瀏覽器會在文本上方和下方各加4像素的空白，以湊足20像素的行高。
2. 修改默認行高最簡單的方式就是使用font快捷屬性，以複合值的形式把 font-size 和 font-height 的值寫在一塊兒，好比：div#intro {font: 1.2em/1.4 helvetica, arial, sans-serif;} 在上面的一行代碼，行高就是字體大小12em的1.4倍。注意這裏不用給line-heightz 值指定單位，只要一個數值就能夠。

4.7 文本轉換 text-transform

值：none、uppercase、lowercase、capitalize。
示例：p {text-transform:capitalize;}
說明：capitalize 值會將每一個詞的首字母裝換爲大寫，這種效果在不少廣告、報道、雜誌的標題中很常見。

4.8 垂直對齊 vertical-align

值：任意長度值以及 sub、 super、 top、 middle、 bottom 等。
示例：span {vertical-align:60%;}
說明：

1. vertical-align 以基線爲參照上下移動文本，但這個屬性隻影響行內元素。
2. 若是想在垂直方向上對齊塊級元素，必須把其display屬性設定爲inline。
3. 該屬性較爲經常使用於公式或化學分子式中的上下標，或用於文本中腳註的角標。
4. HTML 標籤<sup>和<sub>有默認的上標和下標樣式，但從新設定一下vertical-align 和 font-size 屬性能獲得更美觀的效果。例如：p.custom {font-size:.8em; vertical-align:1em;}

5. Web 字體

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

5.1 設定Web字體的方式

有如下三種：

• 使用 Google Web Fonts 或 Adobe 的 Typekit 等公共字體庫
• 使用事先打好包的@font-face 包
• 使用 Font Squirrel 用你本身的字體生成@font-face 包。

5.2 公共字體庫

5.3 打包的 @font-face 包

5.4 生成的 @font-face 包

5.5 文字版式

文字版式講求勻稱，通常是由看不見的網格，框定頁面文字的走向和佈局。勻稱的版式能夠加強頁面的可讀性。

---

參考資料

• CSS設計指南