本文推薦 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 引入樣式表，並檢視結果
-
第八步：如此一來，我們就可以像本篇文章一開始介紹的給“文字”加樣式一樣，來操作這些“字型圖示”
?小總結：
- 上述這些操作跟 @font-face 有什麼關係？
現在我們把之前貼上過來的程式碼在網站上開啟，看看是個什麼東西：
如圖所示，結合阿里的工具，我們確實是既簡單又方便的用了 @font-face 規則。
- 字型圖示的工作原理是怎樣的，為什麼可以這樣用？
在文章《① HTML 基礎》中我們就瞭解到：
我們在編寫 HTML 文件時， 這個標籤是必須指定的，這是為了告訴瀏覽器，你應該用 utf-8 這種 unicode 來解碼。
換句話說，即使我們 HTML 文件裡的文字全部直接用 unicode 碼來寫也是完全沒問題的——unicode 碼，可以認為是世界上任意一種文字的特定編號 。
如果這樣的話，基於“一個國家的文字，其他國家的人看來就是圖示”這個點，那我們製作出來的任意“圖示”也是都可以在頁面上展示，並像“文字”一樣被操作的。
只是一般的字型圖示都不是現有的文字，都是一些流出來可擴充套件的 unicode 碼，換句話說，這些碼你可以任意新增東西，但它不是已有的標準。
因此你需要用 @font-face 規則去宣告一個字型（如上邊及下邊的操作說明）。
- 為什麼第三步不操作 Unicode ，而操作 Font class ？
那我們操作一次看看有哪裡不妥：
我們看到單純的只是把 unicode 碼寫在文件中，是不會顯示出圖示的。我們需要 @font-face 來宣告一個下載字型：
複製並貼上到 HTML 文件中檢視效果：
同樣都可以出來效果，背後也用的是同樣的原理，但我們可以看到上圖中，<body> 標籤裡的 <p> 和 <h1> 都是以 unicode 碼書寫的，這種方法將不利於閱讀和維護——單純看程式碼，我們根本不知道這是個什麼東西。
後記： 下篇文章我們將接著討論“文字屬性”，在學習到其中的 line-height 後，我們再接著這篇文章引入 font 屬性。屆時，“CSS 給文字加樣式”將完全被我們掌握。
加油！