現在的前端設計很流行在各種地方適度地加上單色（或頂多雙色）的向量小圖示來提昇質感。在 BPS 裡面，由於我特別考慮到在手機上的使用，因此我的最上層功能選單按鈕上面都只有圖示而沒有文字，以盡量縮小整體的寬度。
要講到這樣的圖示庫，目前最有名的大概就是 Font Awesome 了。它確實是很不錯的一套圖示庫，即使只是免費版也可以滿足大概九成的圖示使用需求。不過，很多時候我們還是會需要製作自己專屬的圖示庫，可能的原因至少包括：
- 可能我們終究會有幾個圖示是在裡面找不到適合的、需要自己畫的，或者我們覺得別套圖示庫裡面的對應圖示比較好看，想要拿來混合使用。
- 整套的 Font Awesome 加起來終究是有一點體積的。即使在良好的網路和高階的裝置上，要把 Font Awesome 圖示庫整個載入大概還是會花上零點幾秒以上的時間，這會使得網頁常常在剛載入的時候有一瞬間是沒有圖示的，甚至可能會因此有一瞬間有些微的跑版，這就使用者體驗的角度來說並不非常好。
因此，在 BPS 裡面，除了我仍舊還是有把整套 Font Awesome 載入之外，我另外有自己做了一個 BPS 圖示庫，裡面總共就只有十來個圖示，專門包含我自訂的圖示、從別的圖示庫中找來的圖示、以及 Font Awesome 裡面某些我特別需要在最快的時間內載入的圖示。其它那些稍微慢一點點載入也無所謂的圖示我就仍舊直接使用整套 Font Awesome 來處理了。雖然，如此一來到最後我終究只用了 Font Awesome 上千個圖示中的大概二三十個左右，但我是覺得沒必要特別再費工夫抽出那些我需要的部份再打包成較小的圖示庫就是了；整套載入的代價我是覺得也還好，尤其目前據我所知，並沒有一套非常自動化的工具、可以直接爬遍原始碼去整理所有有使用到的 Font Awesome 圖示、並且自動打包的，缺乏這種工具使得打包的動作有點顯得太過麻煩了。
不過當然，雖然是要整套載入，但是我們仍然希望它在網頁載入過程中不要 block 到整體的 rendering，因此這邊就需要用上這一串咒語了：
<link rel="stylesheet" href="font-awesome/css/all.min.css"
media="print" onload="this.media='all'; this.onload=null;">像這樣寫的話，瀏覽器在載入圖示庫的過程中同時也會繼續處理後面的 HTML，而不需要等到圖示庫全部處理好了才繼續。
至於製作自己的圖示庫，就要用上 IcoMoon 這個很方便的免費線上工具了。相信很多前端工程師對這個工具並不陌生，加上它用起來也算直覺簡單，所以我就不多介紹了。但是確實值得一提幾個 IcoMoon 的使用小撇步：
- 它裡面內建的 Font Awesome 圖示庫似乎是舊版的，跟 Font Awesome 5 似乎有一點小不同；如果需要使用第 5 版，可以去 Font Awesome 的官網下載桌機用的版本，裡面有所有圖示的個別 SVG 檔案，用那些 SVG 來匯入圖示進來即可。
- IcoMoon 免費版輸出的字型檔只有 ttf, woff 和 svg 三種格式，但是時下最先進的網路字型格式實為 woff2（檔案大小最小），這個格式在 IcoMoon 是要付費帳號才能輸出的。
不過這一點都無妨！因為網路上免費把 ttf 轉換成 woff2 格式的工具多得是 🤣，例如像這個就是其中之一。轉換好了之後，只要在 CSS 檔之中把 woff2 格式檔案寫入第一順位就行了。現代的主流瀏覽器通通都支援 woff2，所以不需要擔心支援度的問題。
或者，如果你跟我一樣不把這種建置流程自動化就覺得渾身不對勁的話，那也可以在 ttf2woff2 這個模組的基礎之上撰寫自己的轉換程式。例如因為我都是用 Gulp 在做建置自動化，我就寫了如下的外掛：
"use strict";
const through = require("through2");
const ttf2woff2 = require("ttf2woff2");
function transform(file, encoding, callback) {
if(file.isNull()) return callback(null, file);
if(file.isStream()) {
console.log('Cannot use streamed files');
return callback();
}
if(file.extname == ".ttf" && file.isBuffer()) {
file.extname = ".woff2";
file.contents = ttf2woff2(file.contents);
}
return callback(null, file);
}
function woff2() {
return through.obj(transform);
}
module.exports = woff2;這個外掛可以直接把 ttf 檔案的 gulp 流轉成 woff2；然後只要再用例如 gulp-replace 之類的外掛去把 IcoMoon 產生的 style.css 內容改一下就行了。
關於各種網路字型的知識，可以參考 StackOverflow 上面這串的答案，講得滿清楚的。
留言