本篇教程即是關於OpenType-SVG 彩色字體。
在 Glyphs 中，有兩種方法可以將 SVG 信息導入一個字體：（A）從單獨的 .svg 圖像文件導入，或者（B）從已設置好的彩色字體導入。後者既可以是基於不同母版的分層字體，也可以是含被索引的“Color”圖層的 CPAL/COLR 字體，或帶有“iColor”圖層的 Apple 格式的 sbix 字體。
方法 A：從 SVG 圖像文件導入
如果你已經有了單獨的 SVG 圖像文件可用，你可以把它們放置在相應的字符形中，然後導出具有 SVG 表的字體。此種方式可以讓你充分利用 SVG 文件格式的優勢，包括像矢量動畫這樣的瘋狂玩意兒。
現在我們開始作準備，建議你將 .glyphs 文件保存在你希望的位置，並且創建一個名爲“Images”的次級文件夾用於存放 SVG 文件。這是因爲只有這些圖像的相對路徑會被存儲在 .glyphs 文件中，當它們位於次級文件夾時，更易於保持它們處在同一位置。
現在我們需要一個例子。我們爲大寫字母 O 嘗試一個紅色圓形的旋轉動畫。選擇並複製（Cmd-C）這段 SVG 代碼：
打開你選擇的純文本編輯器，例如TextMate、SublimeText，或者Atom，把它粘貼（Cmd-V）進一個新窗口。
然後，在 Images 文件夾中保存該文件爲“O.svg”。這樣，在 Finder 中，你的整個設置看上去是這樣：
回到 .glyphs 文件，準備好大寫字母 O。打開編輯視圖，在“圖層”面板中，點擊“Copy”按鈕爲圖層創建副本，重命名爲 svg。完成後，它看上去應該像這樣：
現在是重點：在母版層裏放進不論什麼內容，都將是黑白的回退字符形，可見於無法顯示 SVG 表中所存儲的彩色信息的應用程序。順便說一下以免你有疑惑：“母版層”即是“圖層”面板中的粗體字圖層，在本例中是名爲“Regular”的圖層。
但是在新建的 svg 層中，你可以將 .svg 圖像文件拖放進來。它應該會立即顯示出來，不過沒有動畫效果。你可以隨意縮放和移動圖像：
關於邊距要注意的一點：svg 層會從其母版層繼承字寬，所以如果你需要調節字距，你需要回到母版層。本例中，如果你沒有縮放置入的 SVG，把字寬設置爲 800 比較合適。在“圖層”面板中點擊“Regular”層，然後再灰色信息框中將寬度改爲 800:
不管怎樣，將字體導出爲 webfont：“文件 > 導出 > Webfont”，使用 WOFF 或 WOFF2 格式。選擇 CFF 或 TTF 都無所謂。
在 Mac 上，Firefox 是唯一支持 OpenType-SVG 字體的瀏覽器。在 Windows 上， Microsoft Edge 也支持。所以如果你想測試你的 OpenType-SVG 字體，你必須能夠運行這些瀏覽器。爲此，你既可以調出一個包含 HTML 和 CSS 代碼的 HTML 文件來顯示 WOFF，或者從mekkablue 腳本庫中調取運行“Test > Webfont Test HTML”腳本。此腳本會在最近使用的 webfont 導出位置爲當前字體創建一個 HTML 文件。
<p>如果你還不熟悉腳本，花一分鐘瀏覽一下該腳本 readme 文檔中的安裝說明，據此安裝腳本。然後，按住 Option 鍵的同時，選擇“Script > Reload Scripts”（Cmd-Opt-Shift-Y）。</p>
該腳本爲你方便地打開了封閉文件夾。現在，只需將 HTML 文件拖放到 Dock 中的 Firefox 圖標上（或者右鍵單擊並選擇“打開方式 > Firefox.app”），鍵入大寫 O，搞定：
嗒噠！不過當心，字體中的動畫非常消耗處理器資源。它會讓你的電腦風扇狂轉，手機用戶則會因你耗盡了他們的電量而感到心情複雜。我們可提醒過你了哦。
方法 B：從既有的彩色字體導入
你可以從多母版的分層字體開始，也可以從帶有索引圖層的 CPAL/COLR（即 Microsoft 彩色字體）或 Apple 格式 sbix 字體開始。
如果是 CPAL/COLR： 確保你在“文件 > 字體信息 > 字體母版”中的“自定義參數”區域裏設置了“Color Palettes”參數，並將“Color”圖層編號，即 Color 0、Color 1、Color 2，等等。（如果你想在 SVG 中使用不同的顏色，考慮使用“Color Palette for SVG”參數。它允許你爲該子樣指定自定義調色板。
如果是分層字體： 確保你在“文件 > 字體信息 > 字體母版”中通過“Master Color”參數設置了顏色。
在這兩種情況下：在“文件 > 字體信息 > 字體子樣”中創建一個包含 SVG 表的子樣。將它命名爲“Regular”或“Multicolor”或“SVG”或你認爲合理的任何名字。然後爲新的子樣添加“Color Layers to SVG”自定義參數，確保其“值”爲勾選狀態：
如果是 sbix：在“文件 > 字體信息 > 字體子樣”中創建新的子樣，添加“SBIX to SVG”自定義參數，將“值”設定爲想要的 iColor 尺寸。這個操作將從具有相同索引尺寸的 iColor 層中獲取 sbix 圖片，並將其轉換爲 SVG 圖像。例如，如果你在自定義參數中指定值爲 256，Glyphs 將查找所有 iColor 256 層並將它們轉換爲svg。
現在通過“文件 > 導出 > Webfont”（Cmd-E）導出。至此全部完成，如前所述在 FireFox 中測試字體吧。（參見“方法 A”）
更多自定義參數
在“文件 > 字體信息 > 字體子樣”（Cmd-I）的“自定義參數”中，你可以添加以下三個中任一參數：
- Export COLR Table
- Export SVG Table
- Export sbix Table
這些參數是用於控制生成哪些顏色表並將其實際轉換爲 OpenType 字體，和不生成哪些顏色表。要減小 webfont 文件大小，你可能希望啓用其中一個表的導出，而禁用所有其他表。例如，如果使用“方法 B”中所描述的方法基於 CPAL/COLR 的設置導出 SVG 表，你可能會想要禁止創建 COLR 表。