- Adobe Fonts 使用手冊
- 簡介
- 字體授權
- 取得及使用字體
- 網頁設計和開發
- 語言支援和 OpenType 特性
- 字體技術
OpenType-SVG 是一種字體格式，其中 OpenType 字體有全部或部分字符以 SVG (可縮放的向量圖形) 圖稿表示。如此將可在單一字符中顯示多種顏色和漸層。由於這些特性的緣故，我們也將 OpenType-SVG 字體稱為「彩色字體」。
OpenType-SVG 字體允許文字與這些圖形特性一起顯示，同時也允許編輯、搜尋文字或為文字編入索引。它們也可能包含允許字符替換或替代字符樣式的 OpenType 特性。
Trajan Color Concept 和 EmojiOne Color 之類的彩色字體會像是典型字體一樣出現在您程式的字體選單中，但它們可能無法充分發揮其潛力，因為許多程式還無法完整支援顏色元件。如果您的軟體程式不支援字體中的 SVG 圖稿，字符將回復為純黑色樣式。顏色仍然可以套用到此遞補樣式中，因為其作用就像是典型的 OpenType 字體一樣。
在 Photoshop 中使用 OpenType-SVG 彩色字體
Photoshop (CC 2017 及更新版本) 支援 OpenType-SVG 字體，並隨附兩種這樣的字體：Trajan Color 和 EmojiOne。與您的 Creative Cloud 訂閱搭配使用的網頁和桌面也包含 Trajan Color。
若要使用 OpenType-SVG 字體，請依照下列步驟進行：
- 建立段落或點文字類型圖層。
- 將字體設定為 OpenType-SVG 字體。這些字體中帶有 OpenType-SVG 圖示：
- 使用鍵盤輸入或使用字符面板選擇特定字符。如果要檢視字符面板，請選取「視窗 > 字符」。
雖然您可以使用 OpenType-SVG 字體輸入字母，替代字符的完整範圍僅可透過「字符面板」提供。例如，Trajan Color Concept 針對每個字元包含 20 個不同的文體集，如銀色、銅色、鋼青色和大理石，這些都需要透過字符面板存取。
如果您將文字圖層轉換為可編輯的形狀 (藉由選擇「類型 > 轉換為形狀」)，則 OpenType-SVG 字體中的字元將還原為黑白遞補樣式。
在 Illustrator 中使用 OpenType-SVG 彩色字體
Illustrator 支援像是 Trajan Color 和 Emoji One Color 等 OpenType SVG 字體。您可以使用字符面板設定特定字符，也可以使用字符面板建立合成字符，並探索其他字元變體。如需 Illustrator 中的 OpenType SVG 字體的詳細資訊，請參閱https://helpx.adobe.com/illustrator/using/fonts.html#OpenTypeSVGfonts。
Trajan Color Concept
Trajan Color Concept 是我們 Adobe Type Concepts 的其中一種：透過敏捷開發程序和縮小比例的字元所開發的字體概念，因此隨著我們對設計的擴展，我們可以更快地提供給喜歡冒險的客戶使用。
Trajan Color Concept 可讓您從許多 (19) 種不同的顏色和紋理中進行選擇。使用如此詳細的 SVG 圖稿存取 20 個文體集中的不同顏色組合會增加整體檔案大小。(如果這讓您聽起來似乎很難使用這些字體，那就對了，這就是為什麼 Trajan Color 仍被視為概念字體的原因之一。)
Trajan Color Concept 中的預設顏色樣式 (金色) 和前 18 個 OpenType 文體集構成了字體中所有可用的多色選項。遞補樣式 (可以在尚未支援 OpenType-SVG 色彩功能的應用程式中看到) 與文體集 20 相同。
EmojiOne Color
Emoji 字體就是 OpenType-SVG 字體的一個範例。使用 Emoji 字體時，您可以在文件中包含各種彩色和圖形化字元，例如表情符號、國旗、路標、動物、人物、食物、地標。OpenType-SVG Emoji 字體 (例如 EmojiOne 字體) 可讓您從一個或多個其他字符建立特定合成字符。例如，您可以建立國家的國旗，或變更以特定字符所描述之人物和身體部位 (例如手部和鼻子) 的膚色。
EmojiOne Color 是 Adobe 根據 Denis Denz 所設計並由 Rick Moby 製作的 EmojiOne 圖稿所建立的開放原始碼彩色字體。此字體包含 Unicode 9.0 中的所有表情符號，並支援 ZWJ、多種膚色和國旗表情符號。
表情符號字體 (例如 EmojiOne) 中的字元與您鍵盤上的字母相異。若要插入這些字元，只能透過作業系統的字符面板—字元對應表 (Windows) 和字元 (macOS)—或是從類似 emojicopy.com 的線上頁面複製文字。
注意：
- 您也可以開啟字符面板，方法為選取「視窗 > 工作區 > 圖形與網頁」然後按一下「字符」標籤。
- 最近使用的表情符號會顯示在字符面板的頂端列中。
在 Photoshop 中，您可以插入一連串 EmojiOne 字符來產生其他字符。例如，您可以建立國家的國旗或變更單一人物或身體部位的膚色。(這不適用於兩個人或更多人的表情符號。)
建立國家的國旗 EmojiOne 中帶圓圈的字母 (A、B、C、D 等) 無法對應到鍵盤上的按鍵。當您從字符面板插入這些字元以組成國家的 ISO 代碼時，這兩個字元會形成該國家的國旗。例如，US 會產生美國國旗、GB 會產生英國國旗、AR 會產生阿根廷國旗以及 IN 會產生印度國旗。完整的代碼清單是由 ISO 3166-1 所定義。
建立字元變體 將單一人物的預設字元或身體部位與五種可用的 Fitzpatrick 量表膚色 (GID 356 到 360) 的任何一種相結合。原始預設字元會替換為符合膚色的字元。這種複合影像目前不適用於擁有一個以上人物的字符。
注意：
- 預設單一人物字元或身體部位表情符號只能與任何一種膚色字元配對一次。
- 字符序列是一種字體特性。並非所有 OpenType-SVG 字體都可讓您合併多個字元來形成單一字符。
搭配 CSS 使用 OpenType-SVG 字體
OpenType-SVG 字體包含可以像其他 OpenType 字體一樣透過 CSS 啟用的特性。請參閱「使用 OpenType 特性」和「CSS 中 OpenType 特性的語法」，以獲得存取這些特性的概觀資訊。
例如，Trajan Color Concept 中的其他顏色樣式設定為稱為文體集的 OpenType 特性，其編號是從 1 到 20 (ss01、ss02、ss03 等)。若要將 20 種樣式的其中一種套用到 Trajan Color 中的文字集，您可以使用 font-feature-settings 來套用其中一種文體集：
.Trajan-gold { font-family: 'Trajan Color Concept';
font-feature-settings: "ss01"; }
.Trajan-silver { font-family: 'Trajan Color Concept';
font-feature-settings: "ss02"; }
在不支援 OpenType-SVG 字體的瀏覽器中，將會顯示遞補樣式 (與文體集 20 相同)。
將 OpenType-SVG 網頁字體新增到您的網站時，請記住其檔案大小可能會比一般 OpenType 字體大，因為增加了與該字體中的全部或部分字符相關聯的 SVG 圖稿。
支援 OpenType-SVG 字體的應用程式
- Photoshop CC 2017 及更高版本
- Illustrator
- Firefox 32 及更高版本
- Microsoft Edge、Windows 10 年度更新版和更高版本
- 在 Windows 10 中，DirectWrite 和 Direct2D 平台元件允許在使用那些 API 的任何應用程式中支援 OpenType-SVG
已知問題
Illustrator 和 InDesign
在 Illustrator 或 InDesign 中使用 OpenType-SVG 彩色字體時，您可能會遇到以下問題：
- 匯出到 PDF 或 SVG 後，字符可能會出現在錯誤的位置。
- 在彩色 SVG 字體上套用透明、旋轉或反射效果時，如果建立字符輪廓，則可能會失去這些效果，或者字元可能會偏離其原始位置。
- 以垂直方式設定文字時，字元位置在匯出後可能會有所不同。
- 在螺旋路徑位置上設定文字時，字元位置可能會不正確。
軟體團隊正在努力解決這些問題。
其他資源
以下是有關準備和使用 OpenType-SVG 字體的其他資訊來源的一些連結：
- OpenType-SVG 字體中 SVG 表格的詳細資料和規格：
https://www.microsoft.com/typography/otspec/svg.htm - 建立 OpenType-SVG 字體的工具和範例檔案：
https://github.com/adobe-type-tools/opentype-svg - https://pixelambacht.nl/chromacheck/ 是一個網頁，它將通知檢視者，告知瀏覽器對不同彩色字體格式的支援 (包括 OpenType-SVG)。(原始程式碼位在 https://github.com/RoelN/ChromaCheck)
- TypeDrawers 論壇上有關準備和使用 OpenType-SVG 字體的熱烈討論：http://typedrawers.com/discussion/comment/19442/
