爲 Android 加進可變字型


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

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

除了使用「可變軸」調試可變字型,使用者亦可選擇如傳統字型一般使用可變字型
除了使用「可變軸」調試可變字型,使用者亦可選擇如傳統字型一般使用可變字型

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

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

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

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

  1. 在 Instance 選單裏選擇 Regular;
  2. Wakamai Fondue 會列出兩條可變軸 opszwght,而 opsz 是隨字級變化的,不在 fonts.xml 的定義範圍裏,故毋需理會;
  3. 把 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>