OpenType 字型中的 SVG 與色彩

本文作者 Johannes Lang,是在奧地利首都維也納工作的圖形設計師,也在維也納的應用藝術大學兼課傳授排版、字型等課。

colorwebfonts

簡介

才不久前,若想要在一組向量字型內放入一種以上的顏色,技術上來說根本不可能。一個多色字母往往需組合多種顏色的部分,而之前就必須搭配多項技術才能達到此效果。但現在的數位樣式卻可突破舊款技術的限制。如果要列印木質或鉛質的風格,每個字母本來就限制只有一種顏色 (隨機斜率不算在內)。但若一個字母要具備兩種以上的顏色,就必須將之分割成不同的色彩部位,而且還要分開列印各種顏色。線上已有某些絕佳的範例圖素可供參考。另外再提一下「疊印 (Overprinting)」,也就是用兩種色彩達到三種顏色的圖像。

woodType-S

模擬雙色疊印,達到三色效果

數位字型格式,可讓各個字母保持僅一個「表面」。一個字母可分割為多個輪廓,但指定的顏色會套用到所有輪廓之上;這就像是凸版印刷,每個字母必須重複疊加才能達到一種顏色以上的效果。單純疊加不能算是理想的解決方案,而且很容易發生錯誤。

等到大家對多色字型的需求越來越大,才有人投入開發額外的表格 (Table),以於 OpenType 字型內儲存這類資訊。本文撰稿之時,已有多種方式可實作出此字型。Adam Twardoch 則是透過「FontLab」部落格,詳細比較了所有可能的解決方案

但對我來說,Adobe/Mozilla 的方法看起來比較有趣。

上述主題已經由 W3C 社群展開討論,並已經有具體的文件記錄。其基本概念就是將有色彩的字母儲存為 SVG 格式的 OpenType 字型。當然你的字型複雜度也可能有所影響,但 SVG 格式所佔的容量可較 PNG 來得小。隨著高解析度畫面的開發活動漸趨熱絡,「向量」似乎可達到比「畫素」更好的解析度。另外有越來越多人對 SVG 的「動畫化」有興趣,將來的運用方式勢必更有趣 (當然也會更煩人)。

技術

我自己並非字型設計師,也不是 Web 開發者,純粹是對這個新的開發領域好奇。我用以下方式設計了多彩的 OpenType 字型;當然應該有其他更好的方法。

你必須先選用字型編輯器,才能打造出自己的字型。字型編輯器有 RoboFontGlyphs (這兩項僅能用於 Mac)、FontLab,以及免費的 FontForge。我自己是選用了 RoboFont 編輯器,除了提供極高的自訂性之外,也能用 Python 打造自己所需的擴充套件。在最終定稿的字型中,我根據自己需要的顏色數量添加了對應的色彩層。你可以立刻繪製到各個色彩層中;或是在前景層 (Foreground layer) 中繪製之後,將各個部位複製到對應的色彩層中即可。有了這個方便的「Layer Preview」擴充套件,你就能預覽所有的疊加層。你也可以提高字型視窗中的縮圖尺寸。有些地方會顯示所有的色彩層。因為這些都是預覽圖,所以你可以再依自己的喜好調整色彩。

RoboFont-Inspector

先定義你想在「Layer Preview」中看到的顏色:

H-separated

layerPreview

各個分割的色彩層與組合之後的外觀

在畫完了自己的字型輪廓之後,各個層/顏色必須逐一儲存為 ufo。我使用簡單的 python 指令碼,將這些檔案儲存在主要檔案的相同路徑之下……

 

看到這裡,你是否對字型設計有了基本的概念呢?如果你本來就對字型設計有興趣,請別錯過原文內更多的精采內容,另有相關範例程式碼及動畫效果可供你參考!

 

 

原文連結:SVG & colors in OpenType fonts

 

 

您可能也會喜歡

目前找不到相關文章

對此文章發表回應

你的電子郵件位址並不會被公開。 必要欄位標記為 *