一次性搞定 Iconfont

原文連結：https://github.com/bsdfzzzy/iconfont-all-in-one

• 一次性搞定 IconFont
  • 什麼是 IconFont
  • IconFont 的背景
    • WebFont
    • Images
    • CSS Sprites
    • IconFont
  • IconFont 原理
  • IconFont 的優缺點
    • 優點
    • 不足
  • 快速使用現有的 IconFont
  • 建立自己的 IconFont
    • 使用軟體生成
    • 使用網站生成
    • 使用指令碼生成
    • .ttf、.eot、.woff 等字型檔案
  • Reference

什麼是 IconFont

顧名思義，IconFont 就是字型圖示。嚴格地說，就是一種字型，但是，它們不包含字母或數字，而是包含符號和字形。您可以使用 CSS 設定樣式，就像設定常規文字一樣，這使得 IconFont 成為 Web 開發時圖示的熱門選擇。

IconFont 的背景

WebFont

我們都知道，在網頁製作中，會經常用到不同的字型，常用的有 微軟雅黑、宋體、Aria 等等。在我們寫css的樣式的時候，通過 font-family 可以指定元素的字型名稱，我們稱這類字型為 WebFont

。但是傳統的web開發人員的字型選擇是有限的。只有少數幾種字型可以保證在所有公共系統中都可以使用——這就是所謂的 Web-safe 字型。我們可以使用字型堆疊來指定可選擇的字型，後面是Web-safe的替代選項，然後是預設的系統字型，但是為了確保我們的設計在每種字型中都可以使用，這增加了測試的開銷。**Web字型是一種CSS特性，允許您指定在訪問時隨您的網站一起下載的字型檔案。**首先，在CSS的開始處有一個@font-face塊，它指定要下載的字型檔案：

@font-face {
  font-family: "myFont";
  src: url("myFont.ttf");
}
複製程式碼
 

然後我們就可以使用我們定義的字型了。

  html {
 	  font-family: "myFont";
	}
複製程式碼

Images

一個健全的網站，說不了各種圖示，新增圖示的傳統方式就是圖片，但是使用圖片存在許多的弊端，主要表現是下面三個方面：

• 增加了頁面的請求
• 圖片的大小和顏色不容易改變
• 為了調高清晰度，圖片越來越大

CSS Sprites

為了減少圖片請求數，提高效能，我們可能會使用雪碧圖：把網頁中比較小的一些小圖片整合到一張圖片檔案中，再利用 CSS 的 background-image 屬性插入圖片，然後利用 background-position 屬性對圖片所需要的部分進行精確定位。但是它有個問題就是，雪碧圖比較適合固定功能的網站。如果我們的網站每隔一段時間就要加一些新功能，新增和替換雪碧圖就變成了很繁瑣的工作。

IconFont

以上技術都有各種缺陷。在效能和方便性的需求上，IconFont 應運而生。IconFont 的使用方式和 WebFont 如出一轍，又把大量的圖示變成了一個字型檔案，減少了請求數，而且有效減小請求體積。當一個網頁有自己的圖示字型庫之後，可以複用在很多地方，減少很多二次開發成本。因此現代網頁多會使用 IconFont 來展示圖示，那麼如何使用並且生成 IconFont 也就變成了前端開發人員必知必會的能力。

IconFont 的優缺點

優點

• 可以方便地將任何 CSS 效果應用於它們。
• 因為它們是向量圖形，所以它們是可伸縮的。這意味著我們可以在不降低質量的情況下伸縮它們。
• 我們只需要傳送一個或少量 HTTP 請求來載入它們，而不是像圖片，可能需要多個 HTTP 請求。
• 由於尺寸小，它們載入速度快。
• 它們在所有瀏覽器中都得到支援（甚至支援到 IE6）。

不足

• 不能用來顯示覆雜影象
• 通常只限於一種顏色，除非應用一些 CSS 技巧
• 字型圖示通常是根據特定的網格設計的，例如 16x16, 32×32, 48×48等。如果由於某種原因將網格系統改為25×25，可能不會得到清晰的結果

IconFont 原理

IconFont 的使用原理來自於 css 的 @font-face 屬性。這個屬性用來定義一個新的字型，基本用法如下

@font-face {
  font-family: <YourFontName>;
  src: <url> [<format>],[<source> [<format>]], *;
  [font-weight: <weight>];
  [font-style: <style>];
}
複製程式碼

font-family：為載入的字型取名字。

src：[url]載入字型，可以是相對路徑，可以是絕對路徑，也可以是網路地址。[format]定義的字型的格式，用來幫助瀏覽器識別。主要取值為：【truetype(.ttf)、opentype（.otf）、truetype-aat、embedded-opentype(.eot)、svg(.svg)、woff(.woff)】。

font-weight：定義加粗樣式。

font-style：定義字型樣式。

format對應字型格式 以及 常見相容性寫法：

@font-face {
 font-family: 'defineName';
 src: url('../fonts/custom-font.eot');
 src: url('../fonts/custom-font.eot?#iefix') format('embedded-opentype'),
      url('../fonts/custom-font.woff') format('woff'),
      url('../fonts/custom-font.ttf') format('truetype'),
      url('../fonts/custom-font.svg#defineName') format('svg');
 font-weight: normal;
 font-style: normal;
}
複製程式碼

iefix有何作用？

IE9 之前的版本沒有按照標準解析字型宣告，當 src 屬性包含多個 url 時，它無法正確的解析而返回 404 錯誤，而其他瀏覽器會自動採用自己適用的 url。因此把僅 IE9 之前支援的 EOT 格式放在第一位，然後在 url 後加上 ?，這樣 IE9 之前的版本會把問號之後的內容當作 url 的引數。至於 #iefix 的作用，一是起到了註釋的作用，二是可以將 url 引數變為錨點，減少傳送給伺服器的字元。

為何有兩個src？

絕大多數情況下，第一個 src 是可以去掉的，除非需要支援 IE9 下的相容模式。在 IE9 中可以使用 IE7 和 IE8 的模式渲染頁面，微軟修改了在相容模式下的 CSS 解析器，導致使用 ? 的方案失效。由於 CSS 直譯器是從下往上解析的，所以在上面新增一個不帶問號的 src 屬性便可以解決此問題。

定義好自己的 font-face 後，就有了新的 IconFont，給要使用這個 IconFont 的物件賦予對應的 font-family 即可。

.example {
  font-family: 'defineName';
  content: '/e103';
}
複製程式碼

這個例子就會將 example 選中的元素渲染為 /e103 對應的 icon。

快速使用現有的 IconFont

IconFont 已經是比較成熟的技術了，國內比較常用的是 阿里媽媽MUX，國外比較常用的有 Font-Awesome 和 Material Design（需要翻牆）。

關於 IconFont 的直接使用，教程非常多，這裡列幾篇筆者認為講得不錯的教程。

阿里 IconFont：

• 知乎回答
• 雲棲社群：阿里巴巴iconfont的正確使用方式

Font-Awesome：

• 如何使用 Font Awesome 字型圖示
• 菜鳥教程：Font Awesome 圖示
• 官方文件

Material Icons：

• Material Design Icons

建立自己的 IconFont

以上介紹瞭如何使用 IconFont。當我們開發大型網站時，很可能希望風格更加貼近使用者（或者說相對標新立異）一點，我們有哪些方法可以開發一套自己的 IconFont 出來呢？

使用軟體生成

我個人不擅長軟體生成，這裡貼兩個還可以的教程

• 一個是 2016 年的，算是比較新的，圖示字型(IconFont)製作
• 一個是 2014 年的，不過提供了四種軟體開發方式，Icon-font圖示字型的四類製作方法

使用網站生成

這裡舉兩個網站的例子：阿里 IconFont，icomoon

阿里 IconFont 上面[使用現有 IconFont](#快速使用現有的 IconFont)裡的知乎回答已經有詳細的步驟了，這裡就不詳述。

icomoon 的使用截圖如下。

隨意選擇幾個圖示，例如前四個

選擇右下角的 Generate Font

點選 Download，會下載一個壓縮包，解壓後如下

可以看到有四個格式（eot/svg/ttf/woff）的字型檔案，就製作成功了，接下來按照上面的步驟去使用吧（也可以參考 icomoon 為你生成的這個例子）

使用指令碼生成

對於前端開發人員來說，找到一個支援生成 IconFont 的外掛是最幸福的事了，幸運的是，我們找到了 gulp-iconfont 這個外掛，結合 gulp-iconfont-css 可以實現自動生成圖示字型檔案。

除了 gulp 的外掛之外，還有另一個工具 webfontloader

他們的文件都很完善，跟著教程可以完成指令碼的配置，我們已經在多個專案中實踐以上的方案，屢試不爽

.ttf、.eot、.woff 等字型檔案

由於網頁中使用的字型型別，也是各瀏覽器對字型型別有不同的支援規格。 字型格式型別主要有幾個大分類：TrueType、Embedded Open Type 、OpenType、WOFF 、SVG。

TrueType

Windows 和 Mac 系統最常用的字型格式，其最大的特點就是它是由一種數學模式來進行定義的基於輪廓技術的字型，這使得它們比基於向量的字型更容易處理，保證了螢幕與列印輸出的一致性。同時，這類字型和向量字型一樣可以隨意縮放、旋轉而不必擔心會出現鋸齒。

EOT– Embedded Open Type (.eot)

EOT 是嵌入式字型，是微軟開發的技術。允許 OpenType 字型用 @font-face 嵌入到網頁並下載至瀏覽器渲染，儲存在臨時安裝資料夾下。

OpenType(.otf)

OpenType 是微軟和 Adobe 共同開發的字型，微軟的IE瀏覽器全部採用這種字型。致力於替代 TrueType 字型。

WOFF–WebOpen Font Format (.woff)

WOFF（Web開發字型格式）是一種專門為了 Web 而設計的字型格式標準，實際上是對於 TrueType/OpenType 等字型格式的封裝，每個字型檔案中含有字型以及針對字型的元資料（Metadata），字型檔案被壓縮，以便於網路傳輸。

SVG (Scalable Vector Graphics) Fonts (.svg)

SVG 是由 W3C 制定的開放標準的圖形格式。SVG 字型就是使用 SVG 技術來呈現字型，還有一種 gzip 壓縮格式的 SVG 字型 SVGZ。

Reference

• jingyan.baidu.com/article/306…
• www.jianshu.com/p/aabf03b15…
• www.sitepoint.com/introductio…
• developer.mozilla.org/en-US/docs/…
• www.jianshu.com/p/c0301e632…