css_05 | CSS——CSS 給文本加樣式：① 字體屬性

本文推薦 PC 端閱讀~

本文版權歸 「公衆號 | 前端一萬小時」 全部，未經受權，請勿轉載！
複製代碼

css_05
複製代碼

簡述字體圖標的原理，動手實現使用 iconfont 實現字體圖標的 demo。
複製代碼

---

前言： 做爲 Web 頁面最基本的組成部分，「文本」的重要性不言而喻。對於「文本」來講，咱們須要掌握兩個與之相關的屬性——「字體屬性」和「文本屬性」。
CSS 字體屬性：主要定義「文本」的字體系列、字體大小、字體粗細、風格和變形等；
CSS 文本屬性：主要定義「文本」的外觀：如縮進和水平對齊、垂直對齊、字間隔和字母間隔、文本轉換、文本裝飾、文本陰影、處理空白符和文本方向等。

本篇，咱們先學習「CSS 字體屬性」。

---

1 定義「文本」的字體系列

font-family 屬性用於定義「文本」的字體系列。

首先，咱們平時所說的「字體」並不僅是單個的字體，而是一個「字體系列」。

除了如 Times、Verdana、Helvetica 或 Arial 等各類「特定字體系列」外，CSS 還定義了 5 種「通用字體系列」。

所謂「通用字體系列」是指：擁有類似外觀的字體系統組合。理論上，用戶安裝的任何字體系列每每都會落入到這 5 種通用系列當中（實際工做中的特例除外）。

1.1 5種通用字體系列

• Serif 字體（又名「襯線字體」）

• Sans-serif 字體（又名「無襯線字體」）

  

• Monospace 字體 （又名「等寬」字體）

  

• Cursive 字體（又名「手寫體」）

  

• Fantasy 字體（又名「夢幻字體」）
  這種字體的特徵就是：咱們沒法很容易地將其歸於以上 4 種字體中。它主要被用在圖片中，字體看起來很藝術，實際網頁上用得很少。

1.2 工做中，怎麼指定「字體系列」

假如需求以下：我想對 p 指定字體爲 Times 顯示，但同時也接受如下的 serif 字體順序（TimesNR、Georgia、New Century Schoolbook 、New York）。

那麼每每咱們會進行以下代碼書寫：

p {
    font-family: Times, TimesNR, Georgia, 'New Century Schoolbook', 'New York', serif;
}

/*🏆固然，也能夠用 unicode 碼來直接表示字體。例如： '\5FAE\8F6F\96C5\9ED1' 就是「微軟雅黑」這四個字的 unicode 碼 */
/*咱們怎麼知道一個「字體」的 unicode 碼？咱們能夠右鍵檢查元素，而後點擊 console ， 而後輸入 escape('黑體') ，就能夠彈出相應的碼。而後把 %u 換成 \ */
複製代碼

⚠️爲何這麼寫：

• font-family 屬性用於指定文檔採用何種「字體系列」；
• 當咱們只對 Web 頁面指定一個或幾個特定字體時，若按如下代碼書寫就會出問題：

p {
    font-family: Times, TimesNR, Georgia, 'New Century Schoolbook', 'New York';
}
複製代碼

因爲在一個跨平臺的環境下，咱們沒法保證用戶一樣也安裝了這些特定字體。
若是用戶沒有安裝這幾種字體，那麼用戶的瀏覽器就會使用一個默認的字體來顯示這個 Web 。對此，咱們 Web 製做者將沒法控制顯示效果。
但，若是末尾加了一個 serif ，則能夠告訴用戶的瀏覽器：即便你電腦裏沒有安裝我以上的這些字體，那麼也請使用一個你電腦裏邊安裝了的「襯線體」來顯示個人 p 。

• 注意看規則裏邊出現了「單引號」：

  

當一個字體名中有一個或多個空格，或者若是字體名包括 # 或 $ 之類的符號時，咱們就必須用單引號把這個字體名引發來，以便瀏覽器識別。

另一種狀況是，若是你把上文的 5 種「通用字體系列」用單引號引發來，那麼瀏覽器則會認爲（或者你原本就想告訴瀏覽器）：你須要一個與這 5 種字體系列同名的「特定字體」而不是「通用字體」。

2 定義「文本」的字體大小

font-size 屬性用於定義「文本」的字體大小。

請先閱讀文章《CSS 值和單位 》中關於 em 、rem 等的講解。

💡在實際工做運用中：
在不考慮 IE8 及如下版本的前提下，咱們徹底能夠一開始就將文檔的 font-size 值設置爲 10px，這樣在以後的計算中就很簡單了。所須要的 (r)em 值就是想獲得的像素值除以 10，而不是瀏覽器默認大小的 16。這樣咱們就能夠很輕鬆地調整 HTML 中咱們想調整的不一樣類型文本的字體大小了。

3 定義「文本」的字體粗細

font-weight 屬性用於定義「文本」的字體粗細。

關鍵字 100 ~ 900 爲字體指定了 9 級加粗度。若是一個字體內置了這些加粗級別，那麼這些數字就直接映射到預約義的級別，100 對應最細的字體變形，900 對應最粗的字體變形。

但，字體所擁有的字重的數量，實際上不多存在知足有 9 個字重恰好跟 100-900 的 CSS 字重一一對應的狀況，一般字體擁有的字重數量爲 4 到 6 個。固然，也沒必要擔憂，至少 400 和 700 對應的字重是每種字體必備的——數字 400 等價於 normal，而 700 等價於 bold。

實際工做中，咱們通常最經常使用的仍是 normal 和 bold 這兩個值。用法舉例：

h2 {
    font-weight: bold;
}
複製代碼

若是將元素的加粗設置爲 bolder，瀏覽器會設置比所繼承值更粗的一個字體加粗。與之相反，關鍵詞 lighter 則會致使瀏覽器將加粗度下移而不是上移。

4 定義「文本」的字體風格

font-style 屬性用於定義「文本」的字體風格。

有如下幾個值：

4.1 italic

若是當前字體的斜體版本可用，那麼文本設置爲斜體版本；若是不可用，那麼瀏覽器會利用 oblique 狀態來模擬 italics。eg:

p {
    font-style: italic;
}
複製代碼

4.2 oblique

將文本設置爲斜體字體的模擬版本，也就是將普通文本傾斜的樣式應用到文本中。eg:

p {
    font-style: oblique;
}
複製代碼

4.3 normal

將文本設置爲普通字體 (將存在的斜體關閉)

5 定義「文本」的字體變形

font-variant 用於定義「文本」的字體變形。

對於 font-variant ，它只有兩個非繼承值：默認值 normal 和 small-caps。normal 描述正常文本，small-caps 要求使用「小型大寫字母」文本。

6 跳出限制，讓「字體」有更多可能——字體圖標

@font-face 規則，它容許網頁開發者爲其網頁指定在線字體。 經過這種做者自備字體的方式，@font-face 能夠消除對用戶電腦字體的依賴。

「規則」寫法以下：

@font-face {font-family: "遠程字體名稱";
            src: url(https://);}
複製代碼

如下咱們以實際工做中經常使用的 iconfont 做說明：

• 第一步：打開阿里巴巴旗下網站 www.iconfont.cn/ ，登陸後搜索圖標 (如：login)

  

• 第二步：加入購物車，並儲存爲項目 test-1

  

• 第三步：在「個人項目」這個界面裏，咱們着重看 Font class

  

• 第四步：能夠按本身須要編輯圖標

  

• 第五步：編輯完，「僅保存」後返回項目界面，點擊「查看在線連接」

  

• 第六步：複製代碼到本身的 html 文檔

  

• 第七步：在本身的 html 引入樣式表，並查看結果

  

• 第八步：如此一來，咱們就能夠像本篇文章一開始介紹的給「文本」加樣式同樣，來操做這些「字體圖標」

  

🏆小總結：

1. 上述這些操做跟 @font-face 有什麼關係？

如今咱們把以前粘貼過來的代碼在網站上打開，看看是個什麼東西：

如圖所示，結合阿里的工具，咱們確實是既簡單又方便的用了 @font-face 規則。

2. 字體圖標的工做原理是怎樣的，爲何能夠這樣用？

在文章《① HTML 基礎》中咱們就瞭解到：

咱們在編寫 HTML 文檔時，<meta charset="utf-8"> 這個標籤是必須指定的，這是爲了告訴瀏覽器，你應該用 utf-8 這種 unicode 來解碼。

換句話說，即便咱們 HTML 文檔裏的文字所有直接用 unicode 碼來寫也是徹底沒問題的——unicode 碼，能夠認爲是世界上任意一種文字的特定編號 。

若是這樣的話，基於「一個國家的文字，其餘國家的人看來就是圖標」這個點，那咱們製做出來的任意「圖標」也是均可以在頁面上展現，並像「文字」同樣被操做的。

只是通常的字體圖標都不是現有的文字，都是一些流出來可擴展的 unicode 碼，換句話說，這些碼你能夠任意添加東西，但它不是已有的標準。

所以你須要用 @font-face 規則去聲明一個字體（如上邊及下邊的操做說明）。

3. 爲何第三步不操做 Unicode ，而操做 Font class ？

那咱們操做一次看看有哪裏不妥：

咱們看到單純的只是把 unicode 碼寫在文檔中，是不會顯示出圖標的。咱們須要 @font-face 來聲明一個下載字體：

複製並粘貼到 HTML 文檔中查看效果：

一樣均可以出來效果，背後也用的是一樣的原理，但咱們能夠看到上圖中，<body> 標籤裏的 <p> 和 <h1> 都是以 unicode 碼書寫的，這種方法將不利於閱讀和維護——單純看代碼，咱們根本不知道這是個什麼東西。

---

後記： 下篇文章咱們將接着討論「文本屬性」，在學習到其中的 line-height 後，咱們再接着這篇文章引入 font 屬性。屆時，「CSS 給文本加樣式」將徹底被咱們掌握。

祝好，qdywxs ♥ you！