小圖示大學問：網頁圖示技術？與字體也有關係？

你曾想過網頁上「圖示（icons）」也與字體有關嗎？為何要使用字體技術呢？到底是技術的限制還是歷史的原因，讓我們繼續看下去！

第一種，老方法：將圖示以HTML中<img>語法插入

在HTML標籤中基礎的<img>標籤，用於顯示圖片，圖示本質上也屬於圖片的一種，但使用這種方式，存在幾種缺陷。

首先，是引入.jpg、.png......等點陣圖格式，需要要預先考量解析度問題，以及顏色是固定，在常見的網頁特效，如hover中，當滑鼠滑動到該元素，會出現變色、或是放大等效果，如果使用<img>希望在hover時讓圖片變色，就需要準備兩張圖片替換，在素材準備上較於麻煩。

即便是使用<img>嵌入.svg，也會因為透過<img>而導致JavaScript、CSS無法讀取.svg內的路徑，無法做到特效。

但如果想要做到類似「Airbnb Lava Style」的「擬物」風格的圖示，因為要透過向量繪製出擬物風格的圖示較於麻煩，所以大多會使用<img>標籤插入渲染出的點陣圖。

Airbnb的例子，包括動畫效果，實現方式有很多種，包括：GIT、影片、Lottie，甚至是canvas API，此處不細究。

前往GitHub Gist查看完整示範

在無障礙方面，如果希望能讓視障者使用之閱讀器，讀出該<img>元素，可以使用「alt」屬性，賦予語意。

第二種：鑲嵌<svg>標籤

相較第一種直接將<svg>鑲嵌入網頁HTML中，提升了部分優點。因為不再使用<img>所以JavaScript、CSS可以讀取其中路徑資訊。包括使用「{ fill: red; }」對元素封閉路徑改變顏色，這在需要實現深、淺色模式的場景十分便利。

透過<svg>標籤，還有另外的優點，可以透過JavaScript對於其中的路徑元素，進行操作，例如：動畫。下面範例是使用JavaScript對網頁中的<svg>中的一組元素進行上下移動的範例。

在<svg>希望做到類似於<img>之「alt」屬性，可以使用「aria-label」屬性，抑或是在<svg>標籤底下包夾<title>。

第三種：iconfont-將圖示封裝成字型

上述的SVG方法，已經可以解決，解析度與動態調整顏色的問題，但如果在一個網頁塞入多個複雜的SVG，可能會出現開發不易（會增加HTML程式碼量，除非參考Meta用框架解決管理問題），還有可能出現像是Vue框架渲染錯誤情況，或是特定使用場景用戶瀏覽器不支援之情況（ft.IE 8）。

因此iconfont誕生，這本質上就是將圖示塞入字體檔案中。這樣做的好處，可以降低更新成本，假設今天有個網頁的圖示風格要全面更新，這樣需要重新打包成字體檔案，將字體檔案替換即可，前端程式碼不用逐一更新。且因為字體顯示在所有瀏覽器都已經很成熟，所以因為兼容性問題發生機率較低。

而且因為是字體，所以可以支援可變字體技術，動態調整粗細，應用更加廣闊，例如在許多網頁都有深色、淺色模式，一般情況下與白底黑字同樣粗的字體，在深色背景淺色文字下會顯得較粗，此時如果是可變字體，就可以進行微調。

隨然聽起來簡單，但實作上仍有許多細節的差異。

第一種：以偽元素+字型形式。是將所需要的圖示封裝到字體中，但Unicode碼位使用私人使用區（Private Use Areas）避免衝突，再透過HTML標註資訊，CSS指定字體。

以知名圖示服務fontawesome來說，首先鑲嵌官方提供的JS程式碼，這段程式碼會自動載入需要的css與woff（字體檔）文件，其中CSS文件會已經設定好多組class的樣式，只要用戶複製fontawesome提供的<i>元素，就能成功將圖示以「偽元素」的方式加載。

第二種：透過強制連字（required ligatures）完成。「連字」顧名思義，透過設定字體檔案，當出現特定排列後，執行替換字符。

這樣的好處是保留了「語意」，因為只是替換顯示效果，在HTML中還是文字本生的意思，如果該介面只有使用圖示表示動作的情況下，對於視障者的螢幕閱讀軟體，可以直接讀取到文字，不必額外設定。

但反之也可能會出現務問題，多半透過聯字的圖示服務都是使用英文，例如：Google Material Icons，如果用戶開啟網頁自動翻譯，會因為字符被翻譯成其他文種，導致強制連字失效。不過開發者只需要在該元素加上「translate="no"」即可。

上面的示範，是啟用了「cart」強制連字功能，大家可以嘗試選中這個圖是並且按下複製並貼到記事本，或是用電腦打開網頁開發者工具，就會看到其實他在HTML是顯示「cart」。

該怎麼選？

如果你希望複雜的擬物、3D效果，哪麼圖片也許會是最直觀的選擇；如果希望針對圖示有動畫、轉場、漸層等那麼SVG方案會很適合，如果是大規模專案，需要高度統一的設計語彙，不追求漸層、旋轉等特效，iconfont的方式在管理上會便利許多，是個合適的選擇。

https://l.twinty.pe/Mgd3qQ

分享文章

CC BY-NC 4.0

此授權條款要求再使用者必須對創作者進行署名。它允許再使用者以任何媒介或格式，出於非商業目的，分享、重混、改編及依原作品進行創作。唯重製後之作