Font-embedding Icons 怎樣解釋？

01-14

" Font-Embedding Icons: This Is a Big Deal "
http://somerandomdude.com/articles/design-technology/font-embedding-icons/
主要來源於上鏈的博文, 初步了解像是用 @font-face 來顯示圖標,

然後搜索沒找到有中文合適的說法, Wiki 也沒找到對應,
具體是怎樣一種技術? 優缺點分別再哪裡呢?

網頁上的圖標有兩種做法：點陣圖（PNG, GIF, JPG 等格式）或者矢量圖 (SVG 格式）。點陣圖不能任意縮放，如果需要不同尺寸的相同圖標，要自己重新製作多個尺寸，麻煩不說，管理成本和流量成本會隨之飆升。當然你也可以只製作一個大尺寸的圖標，然後交給瀏覽器用演算法縮小到合適的尺寸，但不要指望這樣做在非 OS X 平台上能有多好的顯示效果。矢量圖則可以任意縮放，可惜不是所有瀏覽器都支持 SVG 格式，而且支持的瀏覽器對 SVG 格式的不同規範實現也不一樣，兼容性很成問題。更不用提 SVG 格式無法有效實現點陣圖的一些特效（比如逼真的光影、煙霧、紋理等）。

Font-embedding Icons 中文大約可以翻譯為「圖標字體」。這個概念其實並不是什麼新東西，Windows 上很早就存在這樣的 *ding 系列矢量字體，比如 Webdings, Windings 1, Windings 2 等系列字體。這些字體包含的不是文字，而是圖像：每一個「字」實際上是一張矢量圖。圖標字體的主要問題是不能實現顏色：本質上圖標字體的每個字都只有二維的幾何輪廓，完全沒有【也不會有】顏色特徵。也就是說圖標字體只能達到簡單的顯示一個幾何圖形的作用。換句話說，圖標字體無法實現複雜的圖標。

但對於簡單的單色圖標，使用圖標字體可以非常方便的在任何位置嵌入圖標：只需要調用合適的圖標字體、然後鍵入對應圖標的字元就可以得到相應的幾何圖形，比起用 img 標籤、CSS 來指定圖標都方便不少。利用合適的工具，還可以自己繪製需要的圖標，然後生成特定的圖標字體，通過網頁字體的方式嵌入到網頁中，從而在頁面上實現訂製化的圖標集。

圖標字體的優點那篇文章提到有：

減少 HTTP 請求數：這和 CSS sprite 是一個原理，將多個小文件的請求融合成為一個大文件的請求，可以顯著減少 HTTP 請求數，從而避免昂貴的 TCP 連接建立開銷，提高網頁的相應速度。
矢量圖標，任意縮放。
易於管理：改變圖標顏色【雖然只能是單色】和選擇圖標都變得異常容易。
只需要改動一行字體文件的位置就可以自動切換頁面上的全部圖標。
還可以用 CSS3 動畫效果。

缺點也很明顯，那篇文章提到的有：

字體文件體積龐大：複雜的矢量圖的尺寸本來就不小。如果頁面上圖標使用不多，採用圖標字體反而可能會延長頁面讀取時間。
字元和圖標字體中的圖像對應關係並不標準，輸入圖標可能是個問題（A 對應什麼圖像？）
錯誤的使用圖標字體可能會污染你的 HTML 標籤【但作者並未給出例子，很費解這個】
只能單色的簡單幾何圖形

另外我想到的問題有：

內容和樣式混雜：圖標本質是樣式，但用字元替代圖標會導致內容和樣式不分。寫 HTML 代碼的時候你看到一個 "A" 可能並不是真的代表英文字母，而是對應的一個圖標。這會導致易用性的問題。
正如字體渲染在不同平台上的效果不同一樣，圖標字體在不同平台上的渲染效果差別很大。最悲劇的是 Windows ，你就等著看那醜陋的字體吧！
有些瀏覽器不支持 font-face，為了兼容性還得給一套 fallback 方案，並沒有節省到時間，得不償失。

webfont技術-iconic font，Font Awesome, the iconic font designed for Bootstrap 去這個網站下個源碼包，就可以把圖標字體應用到你的網頁上了