爲 Android 加進可變字型

By Toby Tso on 17 Jan, 2021

之前在文章提到 Android 支援可變字型。fonts.xml 裏可變字型的寫法基本就是給各欄位設定所指定可變字型各「可變軸」的值。

一般現成的可變字型自帶不少子樣 (instance)，令使用者可在傳統的字型選單裏如傳統字型一般使用可變字型，而不一定需要在一條連續的「可變軸」上調試字型的表現。

如果想將現成的可變字型加進 Android，可以先使用工具讀取可變字型的子樣 (instance) 設定值，然後把這些數值填入 fonts.xml 裏的各欄位。

讀取可變字型的子樣不一定需要構建複雜的本機環境。網上有 Axis-Praxis、Wakamai Fondue 等工具，允許使用者上載並調試可變字型檔案。本教程使用 Wakamai Fondue。

上載字型後，Variable 板塊會列出字型預設的所有子樣 (instance)，而 Instance 選單上方則是該字型的所有「可變軸」。選擇不同的 Instance，可變軸隨設定值而變化。需要填入 fonts.xml 的也正是這些數值。

在此演示將 SF Pro 的 Regular 字重加進 Android：

在 Instance 選單裏選擇 Regular；
Wakamai Fondue 會列出兩條可變軸 opsz 與 wght，而 opsz 是隨字級變化的，不在 fonts.xml 的定義範圍裏，故毋需理會；
把 SF Pro 的 Regular 字重寫入 fonts.xml，最終代碼應該是：

<font weight="400" style="normal">SF-Pro.ttf
    <axis tag="wght" stylevalue="400.0" />
</font>

而當你把 SF Pro 整個字型家族（包含全部風格與字重）寫入 fonts.xml，最終代碼應該如下：

<family name="sans-serif">
    <font weight="100" style="normal">SF-Pro.ttf
        <axis tag="wght" stylevalue="30.925003051757812" />
    </font>
    <font weight="100" style="italic">SF-Pro-Italic.ttf
        <axis tag="wght" stylevalue="28.92999267578125" />
        <axis tag="YAXS" stylevalue="400.0" />
    </font>
    <font weight="300" style="normal">SF-Pro.ttf
        <axis tag="wght" stylevalue="274.31500244140625" />
    </font>
    <font weight="300" style="italic">SF-Pro-Italic.ttf
        <axis tag="wght" stylevalue="276.30999755859375" />
        <axis tag="YAXS" stylevalue="400.0" />
    </font>
    <font weight="400" style="normal">SF-Pro.ttf
        <axis tag="wght" stylevalue="400.0" />
    </font>
    <font weight="400" style="italic">SF-Pro-Italic.ttf
        <axis tag="wght" stylevalue="400.0" />
        <axis tag="YAXS" stylevalue="400.0" />
    </font>
    <font weight="500" style="normal">SF-Pro.ttf
        <axis tag="wght" stylevalue="510.0" />
    </font>
    <font weight="500" style="italic">SF-Pro-Italic.ttf
        <axis tag="wght" stylevalue="508.0" />
        <axis tag="YAXS" stylevalue="436.0" />
    </font>
    <font weight="900" style="normal">SF-Pro.ttf
        <axis tag="wght" stylevalue="860.0" />
    </font>
    <font weight="900" style="italic">SF-Pro-Italic.ttf
        <axis tag="wght" stylevalue="858.3999938964844" />
        <axis tag="YAXS" stylevalue="400.0" />
    </font>
    <font weight="700" style="normal">SF-Pro.ttf
        <axis tag="wght" stylevalue="700.0" />
    </font>
    <font weight="700" style="italic">SF-Pro-Italic.ttf
        <axis tag="wght" stylevalue="700.0" />
        <axis tag="YAXS" stylevalue="430.0" />
    </font>
</family>