在網頁中使用 Font Awesome 加一些圖形字元 (icon) 大概很多人都會: 下載 font awesome 提供的壓縮檔 (內含 fonts, CSS ...), 並放到 web server 上, 然後在網頁的前頭加上 <link> tag 來下載就完成了必要的準備工作.

<link type="text/css" rel="stylesheet" href="css/font-awesome.min.css" />

或者是直接使用 font awesome 提供的 cdn 連結也行.

<link type="text/css" rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous" />

不過如果你遇到的是像我這樣想把 Font Awesome 當中的2~3個圖形字元的字型塞進 embedded system 裡; 或者, 塞進 PIXNET 的貼文中, 不另外下載字型檔案; 那就得用一些其他技巧了. 下面記錄是我自己應用的步驟:

Step 1: 由 Font Awesome 抽出需要的圖形字元

原本這個步驟有點煩, 不過現在 http://fontello.com/ 這個網站提供了一個方便的介面, 幾個步驟就可以把我們需要的圖形字元的字型抽出來並下載回來. 同時下載回來的壓縮檔裡也提供了字型檔, CSS 檔及必要的說明和樣版, 所以在一般應用上我們就不用再自己手動加工抽出來的圖形字元了.

備註: 其實這個網站把它的所有程式都供獻出來了, 我們可以由 github 下載這個網站所有的程式及內容回來自己也架設一個一模一樣的網站, 或者研究他是如何運作, 或者使用其中一些元件. 下載網址: https://github.com/fontello/fontello

http://fontello.com/ 的頁面上目前提供了一個操作行, 三個操作子頁籤 (tab) 和一個說明子頁籤. 操作行提供搜尋, 設定 (可以設定點陣字型的大小, 字型名稱...) 及下載的功能操作, 當我們切換子頁籤時操作行是維持不變的. 子頁籤的功能分別是:

  • Select Iocns (選擇圖形字元)
    我們主要的操作都在這個子頁籤中, 我們可以在幾個常見的 Web Font 字型檔 (包括: Fontelico, Font Awesome, Entypo, Typicons, Iconic, Modern Pictograms, Meteocons, MFG Labs, Maki, Zocial, Brandico, Elusive, Linecons, Web Symbols) 中挑選我們需要的 icons, 如果這些字型檔還不夠用, 也可以自行上傳一個自訂的字型檔. 一般狀況下選完 icons 之後, 我們就直接下載即可.
  • Customize Names (自訂字元名稱)
    這個子頁籤會列出我們所選擇的 icon 原本的名稱. 如果名稱有衝突 (或者你不喜歡), 你可以在這個子頁籤進行修改.
  • Customize Codes (自訂字元編碼)
    這個子頁籤會列出我們所選擇的 icon 原本的 unicode, 如果 unicode 有衝突 (或者你不喜歡), 你可以在這個子頁籤進行修改.
  • Help / Wiki
    這個子頁籤提供的是操作說明 (連結到 github 上).
fontello-01

http://fontello.com 的Select Iocns子頁籤

fontello-02

http://fontello.com 的Customize Names及Customize Codes子頁籤

解開下載回來的檔案, 我們可以看到css及font二個子目錄, 及以demo.html, config.json, LICENSE.txt及README.txt等四個檔案. 初次使用的人把README.txt細讀一下應該就會用了.

Step 2A: 修改 CSS 設定, 附加字元的字型 (woff 及 truetype)

找到css/fontello-embedded.css, 把第二段的@font-face拷貝出來 (如下面程式段落所示), 貼在你自己的 CSS 中, 或者是部落格貼文. (依據字元字型的數量以及字元圖形的複雜程度, 第 3 行及第 4 行可能會非常的長, 一般我會把這一段貼在 CSS 檔的最前面).

@font-face {
  font-family: 'fontello';
  src: url('data:application/octet-stream;base64,...') format('woff'),
       url('data:application/octet-stream;base64,...') format('truetype');
}

Step 2B: 修改 CSS 設定, 附加字元的字型 (SVG)

Step 2A 用的是 woff 格式及 truetype 格式, 字串會比較長一些, 其實使用 SVG 字型會比較小, 不過就要自己加工一下了. 在font目錄中其實是有 SVG 字型檔的, 檔案的附檔名就是.svg (如果你沒有更動字型的名稱的話, 它就是fontello.svg).

而我們需要作的就是把.svg的內容轉成類似上面 Step 2A 的格式. 使用 SVG 字型, 可以比較省事, url()只要一組就好, 當然format(...)要把它改成format('svg'). 如下面所列:

@font-face {
  font-family: 'fontello';
  src: url('data:application/octet-stream;base64,...') format('svg');
}

比較麻煩的是我們需要, 把.svg檔案的內容轉成 base64 編碼, 然後貼在...的位置. 不過還好的是現在 online 轉換工具的網站相當多, 只要請 Google 大神幫忙搜尋base64 encode online即可找到一堆. 例如:

不過要注意找一個輸出就是一個長字串, 中間沒有換行的會方便一些. 下面你看到的就是這一篇貼文用的 SVG 字型設定.

@font-face {
  font-family: 'fontello';
  src: url('data:application/octet-stream;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/Pgo8IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxtZXRhZGF0YT5Db3B5cmlnaHQgKEMpIDIwMTkgYnkgb3JpZ2luYWwgYXV0aG9ycyBAIGZvbnRlbGxvLmNvbTwvbWV0YWRhdGE+CjxkZWZzPgo8Zm9udCBpZD0iZm9udGVsbG8iIGhvcml6LWFkdi14PSIxMDAwIiA+Cjxmb250LWZhY2UgZm9udC1mYW1pbHk9ImZvbnRlbGxvIiBmb250LXdlaWdodD0iNDAwIiBmb250LXN0cmV0Y2g9Im5vcm1hbCIgdW5pdHMtcGVyLWVtPSIxMDAwIiBhc2NlbnQ9Ijg1MCIgZGVzY2VudD0iLTE1MCIgLz4KPG1pc3NpbmctZ2x5cGggaG9yaXotYWR2LXg9IjEwMDAiIC8+CjxnbHlwaCBnbHlwaC1uYW1lPSJkb3dubG9hZCIgdW5pY29kZT0iJiN4ZTgwMDsiIGQ9Ik03MTQgMTAwcTAgMTUtMTAgMjV0LTI1IDExLTI1LTExLTExLTI1IDExLTI1IDI1LTExIDI1IDExIDEwIDI1eiBtMTQzIDBxMCAxNS0xMCAyNXQtMjYgMTEtMjUtMTEtMTAtMjUgMTAtMjUgMjUtMTEgMjYgMTEgMTAgMjV6IG03MiAxMjV2LTE3OXEwLTIyLTE2LTM3dC0zOC0xNmgtODIxcS0yMyAwLTM4IDE2dC0xNiAzN3YxNzlxMCAyMiAxNiAzOHQzOCAxNmgyNTlsNzUtNzZxMzMtMzIgNzYtMzJ0NzYgMzJsNzYgNzZoMjU5cTIyIDAgMzgtMTZ0MTYtMzh6IG0tMTgyIDMxOHExMC0yMy04LTM5bC0yNTAtMjUwcS0xMC0xMS0yNS0xMXQtMjUgMTFsLTI1MCAyNTBxLTE3IDE2LTggMzkgMTAgMjEgMzMgMjFoMTQzdjI1MHEwIDE1IDExIDI1dDI1IDExaDE0M3ExNCAwIDI1LTExdDEwLTI1di0yNTBoMTQzcTI0IDAgMzMtMjF6IiBob3Jpei1hZHYteD0iOTI4LjYiIC8+CjxnbHlwaCBnbHlwaC1uYW1lPSJsaW5rLWV4dCIgdW5pY29kZT0iJiN4ZjA4ZTsiIGQ9Ik03ODYgMzMydi0xNzhxMC02Ny00Ny0xMTR0LTExNC00N2gtNDY0cS02NyAwLTExNCA0N3QtNDcgMTE0djQ2NHEwIDY2IDQ3IDExM3QxMTQgNDhoMzkzcTcgMCAxMi01dDUtMTN2LTM2cTAtOC01LTEzdC0xMi01aC0zOTNxLTM3IDAtNjMtMjZ0LTI3LTYzdi00NjRxMC0zNyAyNy02M3Q2My0yN2g0NjRxMzcgMCA2MyAyN3QyNiA2M3YxNzhxMCA4IDUgMTN0MTMgNWgzNnE4IDAgMTMtNXQ1LTEzeiBtMjE0IDQ4MnYtMjg1cTAtMTUtMTEtMjV0LTI1LTExLTI1IDExbC05OCA5OC0zNjQtMzY0cS01LTYtMTMtNnQtMTIgNmwtNjQgNjRxLTYgNS02IDEydDYgMTNsMzY0IDM2NC05OCA5OHEtMTEgMTEtMTEgMjV0MTEgMjUgMjUgMTFoMjg1cTE1IDAgMjUtMTF0MTEtMjV6IiBob3Jpei1hZHYteD0iMTAwMCIgLz4KPGdseXBoIGdseXBoLW5hbWU9ImRvd25sb2FkLWNsb3VkIiB1bmljb2RlPSImI3hmMGVkOyIgZD0iTTcxNCAzMzJxMCA4LTUgMTN0LTEzIDVoLTEyNXYxOTZxMCA4LTUgMTN0LTEyIDVoLTEwOHEtNyAwLTEyLTV0LTUtMTN2LTE5NmgtMTI1cS04IDAtMTMtNXQtNS0xM3EwLTggNS0xM2wxOTYtMTk2cTUtNSAxMy01dDEzIDVsMTk2IDE5NnE1IDYgNSAxM3ogbTM1Ny0xMjVxMC04OS02Mi0xNTF0LTE1Mi02M2gtNjA3cS0xMDMgMC0xNzcgNzN0LTczIDE3N3EwIDcyIDM5IDEzNHQxMDUgOTJxLTEgMTctMSAyNCAwIDExOCA4NCAyMDJ0MjAyIDg0cTg3IDAgMTU5LTQ5dDEwNS0xMjlxNDAgMzUgOTMgMzUgNTkgMCAxMDEtNDJ0NDItMTAxcTAtNDMtMjMtNzcgNzItMTcgMTE5LTc2dDQ2LTEzM3oiIGhvcml6LWFkdi14PSIxMDcxLjQiIC8+CjwvZm9udD4KPC9kZWZzPgo8L3N2Zz4=') format('svg');
}

Step 3: 修改 CSS 設定, 附加必要的 CSS

你所選擇的這些符號的 unicode 編碼可以在css/fontello-embedded.css的後半段找到. 例如我由 http://fontello.com/ 操作, 選擇下載了三個符號, 下載的css/fontello-embedded.css檔案中最後面三行所列出來的符號 unicode 如下: (其中的 '\e800', '\f08e', '\f0ed' 就是我們需要的 unicode)

.icon-download:before { content: '\e800'; }
.icon-link-ext:before { content: '\f08e'; }
.icon-download-cloud:before { content: '\f0ed'; }

像本貼文我要展示給大家看的是在<a> (anchor tag) 之後附加一個下載的符號, 於是我就在文章中附加了下面 4 個 CSS 設定: 第一個 CSS 設定 pseudo element ::after的字型, 後面 3 個則依不同的 css class name 附加不同的符號. 以下是我附在貼文中的 CSS:

<style>
.article-content-inner a::after {
font-family:'fontello'
}
.article-content-inner a.extern::after {
content:" \f08e"
}
.article-content-inner a.dnld::after {
content:" \e800"
}
.article-content-inner a.dnld-cloud::after {
content:" \f0ed"
}
</style>

Step 4: 修改 HTML 檔

然後我們就可以直接修改需要附加字型的地方, 加上其中一個 classname 即可.

<a class='extern' href=#>Test1</a>
<a class='dnld' href=#>Test2</a>
<a class='dnld-cloud' href=#>Test3</a>

結果如下列三行所示:

Test1

Test2

Test3

結果的圖檔如下

embedded web font

附註

  • 其實如果頁面有中文的罕見字也可以依樣畫葫蘆(註一): 把中文造字給附在網頁的 CSS 上. 這樣就不必擔心讀者沒有我們自己造的字型檔, 或者沒有下載安裝我們所使用的造字檔了.

    • 註一: 當然你必需要先有罕見字的造字檔 (最好是 SVG 版本的), 有了罕見字的字型之後真的就是依樣畫葫蘆. 至於輸入罕見字則是另一個課題, 不過至少直接輸入 unicode 是 OK 沒問題的啦!

  • 使用 iPhone 的內建 browser safari 的人要注意一下, 如果你看不到這類字型的字元, 可以卸載 safari APP 之後, 再重新開啟 safari APP, 如果還是不行則手機必需要 重新開機 才會正常. 用 Google Chrome 則不會有這個現象.
相关文章