教程 可變字體
No.07 Variable Fonts

如何製作 可變字體

製作可變字體之前,您需要先了解幾件事。本教程演示如何基於現有的非可變字體來創建可變字體。

教程式號: 07
官方原文: high-logic.com
內容狀態: ✅ 基於完整內容創建

可變字體的概念已經存在了幾十年,但直到 2016 年,這項技術才被 OpenType 規範採用。

可變字體是單個文件,包含一個或多個軸(例如字重或寬度),允許您通過插值使用連續範圍的樣式變化。FontCreator 允許您導出可變字體,但它也可以用於通過單擊導出所有預定義的樣式(命名實例),因此您可以更快地製作字體。

本教程展示如何從兩個現有的(非可變)字體創建可變字體。

我們假設您已經制作了字體族的常規和粗體版本。要開始,請在 FontCreator 中打開它們。

字重軸

由於我們結合了兩個不同字重的字體,我們需要添加字重軸。

啟用常規樣式(1)並打開字體屬性面板(2)。

從那裏,轉到軸選項卡(3)並單擊 [+] 工具欄圖標並選擇字重(4)。

字體屬性 - 軸選項卡

粗體主字體

在字體屬性面板中,選擇主字體選項卡。單擊 [+] 工具欄圖標並選擇粗體字體。這將把粗體字體中的所有字形輪廓複製到這個字體中。

注意:此時您可能會注意到字體概覽面板中的幾個字形突然有紅色背景標題。這表示這些字形存在兼容性問題,因此插值將失敗。我們將在本教程後面介紹這一點。

我們需要更新兩個主字體的軸位置。選擇常規主字體並將位置設置為 400。對於粗體主字體,將其設置為 700。

此時我們已經有一個可變字體了。做得好!

初步印象

如果您對目前的結果感到好奇,我們也是。

要使用字重軸,我們需要瀏覽變化面板。如果它尚未可見,請從主菜單中選擇視圖 -> 面板,然後確保已選中變化。您也可以使用快捷鍵 Ctrl+F7 切換此面板的可見性。

變化面板允許您預覽主字體之間的位置。使用字重滑塊,您將看到輪廓自動插值。

我們還需要使用另一個面板,讓我們引入主字體和圖層面板。如果它尚未可見,請轉到主菜單並選擇視圖 -> 面板 -> 主字體和圖層。快捷鍵 Ctrl+F6 也可以。

此面板允許您在可用的主字體之間切換。這很重要,因為字形輪廓圖層始終位於主字體上。因此,如果您想調整常規字形輪廓,請選擇該主字體。

測試網絡字體

所以使用字重滑塊很有趣,但它在 FontCreator 之外真的有效嗎?

讓我們看看...從主菜單中選擇字體 -> 測試網絡字體(或按 Ctrl+F5)。這將導出可變字體以及一個網頁,該網頁將在您的預設網絡瀏覽器中打開。

兼容性問題

正如我們之前提到的,插值只有在輪廓圖層兼容的情況下才能工作。因此,對於每個字形,輪廓圖層必須具有相同數量的輪廓。它們也必須處於相同的順序,並且點的數量也必須匹配。對於複合字形,字形成員必須匹配。

為了讓 FontCreator 修復基本問題,我們在字體概覽面板中選擇所有字形,然後單擊主字體和圖層面板頂部的"修復"工具欄按鈕。

很可能仍然有問題的字形。要修復這些,我們需要手動調整字形輪廓。雙擊字形以在字形面板中打開它。主字體和圖層面板現在將顯示一些關於兼容性問題類型的提示。

主字體和圖層面板

為了進一步協助此過程,我們啓用顯示兼容性問題工具欄按鈕,該按鈕也在主字體和圖層面板上可用。這允許我們查看需要進行哪些更正。最終,所有兼容性問題都需要解決,否則您的字體將出現無法正確插值的字形。

命名實例

要充分利用您的可變字體,它還應包含實例。這樣,缺乏變化支援的舊軟件仍然可以使用命名實例。

我們轉到字體屬性面板上的實例選項卡。在這裏,我們更新預設實例(400)的軸位置,並添加幾個字重為 500、600 和 700 的實例。我們還提供唯一的樣式名稱。

雖然可變字體不需要,但我們還提供正確的字重類別和寬度類別值。這些值很重要,以防我們將這些實例導出為非可變字體。所以我們幾乎免費得到這些 ;-)

軸值

這裏還有一件事要介紹。我們可以為軸上的特定位置(甚至軸的組合)提供名稱。我們只需添加與命名實例中使用的軸位置匹配的軸值。所以我們只需添加 400、500、600 和 700。我們還為常規軸值檢查屬性"可省略軸值名稱",因為它代表正常的字重值。