原創：itsOli ?@前端一萬小時

本文版權歸作者所有，未經授權，請勿轉載！

本文節選自“語雀”私有付費專欄「前端一萬小時?|?從零基礎到輕松就業」

簡述字體圖標的原理，動手使用 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，這樣在之后的計算中就很簡單了。所需要的 rem/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。例：p?{
??font-style:?italic;
}

4.2 oblique

將文本設置為斜體字體的模擬版本，也就是將普通文本傾斜的樣式應用到文本中。例：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 作說明：

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

• 第二步：加入購物車，并儲存為項目 test-1；

• 第三步：在“我的項目”這個界面里，我們著重看 Font class；

• 第四步：可以按自己需要編輯圖標；

• 第五步：編輯完，“僅保存”后返回項目界面，點擊“查看在線鏈接”；

• 第六步：復制代碼到自己的 HTML 文檔；

• 第七步：在自己的 HTML 引入樣式表，并查看結果；

• 第八步：如此一來，我們就可以像本篇文章一開始介紹的給“文本”加樣式一樣，來操作這些“字體圖標”；

?小總結：

1.?上述這些操作跟 @font-face 有什么關系？

現在我們把之前粘貼過來的代碼在網站上打開，看看是個什么東西：

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

2.?字體圖標的工作原理是怎樣的，為什么可以這樣用？

在文章《① HTML 基礎》中我們就了解到：

我們在編寫 HTML 文檔時， 這個標簽是必須指定的，這是為了告訴瀏覽器，你應該用 utf-8 這種 Unicode 來解碼。

換句話說，即使我們 HTML 文檔里的文字全部直接用 Unicode 碼來寫也是完全沒問題的——Unicode 碼，可以認為是世界上任意一種文字的特定編號。

如果這樣的話，基于“一個國家的文字，其他國家的人看來就是圖標”這個點，那我們制作出來的任意“圖標”也是都可以在頁面上展示，并像“文字”一樣被操作的。

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

因此你需要用 @font-face 規則去聲明一個字體(如上邊及下邊的操作說明)。

3.?為什么第三步不操作 Unicode，而操作 Font class ？

那我們操作一次看看有哪里不妥：

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

復制并粘貼到 HTML 文檔中查看效果：

同樣都可以出來效果，背后也用的是同樣的原理，但我們可以看到上圖中， 標簽里的 和

都是以 Unicode 碼書寫的，這種方法將不利于閱讀和維護——單純看代碼，我們根本不知道這是個什么東西。

---

后記：下篇文章我們將接著討論“文本屬性”，在學習到其中的 line-height 后，我們再接著這篇文章引入 font 屬性。屆時，“CSS 給文本加樣式”將完全被我們掌握。

祝好，qdywxs ? you！

點擊“

總結

以上是生活随笔為你收集整理的arial unicode ms字体_（05）CSS 给文本加样式： 字体属性 | CSS的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。