打從 Flash 時代在設計國字旁加上直式排版的注音模組時，就一直有個困擾，在不同作業系統時，因為能使用的字型不同，尺寸大小就很難控制；尤其是在 Linux 中，調號的符號有的很小，差異更大。去年有花了一點時間研究怎麼製作 web font，將注音符號由教育部開放的字型中擷取出來，應用在 HTML5 FUN 國字加直式注音的程式中，效果滿不錯的。最近因為要讓「HTML5 對對碰」能使用「EngTRESS A」(教育部九年一貫英語組輔導群製作的 EngTRESS font)，又需要製作 web font ，結果當然是因為太久沒用，根本完全忘了程序是什了。這一次特別手寫筆記，然後將程序記錄在本篇中，方便以後參考。
需要使用到的工具是「FontForge」，它的官網如下：
我下載回來的 EngTRESS font 的字型檔檔名是「EngTRESS.ttc」。
啟動 FontForge 以後，先找到存放 EngTRESS.ttc 的路徑，並開啟它：
這個字型檔中有兩種字型「EngTRESS A」和「EngTRESS B」，B 的字型是有加線的，所以選擇「EngTRESS A」：
接著選擇要製作成 web font 的字。因為 EngTRESS font 只有針對書寫英文時會用到的字設計，所以，以可以用這樣的程序來選取所有字：
- 按上方主選單「Edit」中的「 Select」
- 然後點選「 Glyphs Worth Outputting」
選好要處理的字以後，就可以產出 web font 了：
- 按上方主選單「File」
- 按「Generate Fonts」
在 Generate Fonts 的對話框中，選擇字型檔的格式及路徑：
- 先選擇要儲存的資料夾
- 選擇「Web Open Font (WOFF)」格式
- 輸入檔名
- 按「Generate」鈕來產出字型檔。
如果像上圖中有勾選了「Validate Before Saving」，可能會出現底下的訊息：
沒關係，就放心地按「Generate」的按鈕來儲存字型檔。
完成的話，就可以去前面指定的路徑找製作好的 .woff 檔案了。
前面我們是利用「Select」的「Glyphs Worth Outputting」來選取字型檔中有造字的部份，這個方法要是用在中文字型檔，應該滿可怕的，會有五、六千個宇，甚至一、兩萬個字。如果只是想製作注音符號的部份，可以這樣做：
- 按主選單「Edit」中的「Select」。
- 點選「Select by Script」。
接著在下拉式選單中找「Bopomofo」
另外兩個選項設為：
- All glyphs
- Select Results
按「OK」鈕，就會將所有注音符號選取好。
如果想再繼續加別的字集，就重覆前面的程序，並將「Select Results」換成「Merge Results」。
至於如何利用 JavaScript 來載入製作好的 web font 呢？可以參考「CSS Font Loading API 」中的「FontFace」：
發表文章
沒有留言:
張貼留言