可変フォントは、太さの幅を渡さないと動かない

自作の可変フォントを、道具に読み込んだ。太さのつまみを 400 から 500 に上げても、字が変わらない。800 と 900 も同じに見える。目のせいではなかった。画素を数えると、本当に同じだった。

この研究を一言でいうと──可変フォントは、太さの範囲を渡して初めて軸が動く。

幅を渡さないと、400 に固定される

ページの中でフォントを読み込むとき、太さの範囲を渡さないと、そのフォントは「400 の字」として登録される。軸は一度も動かない。細くしても 400 のまま。太くすると、ブラウザが 400 の字を勝手に太らせた、にせの太字になる。

数字は HHOO を 110px で描いたときの黒い画素の数。渡さない側は 100〜500 が 11592 で、画素まで同じ。700 と 900 も 13374 で同じ。渡す側は 100 から 900 まで 2.6倍に増える。

フォントが持っている端を、そのまま渡す

太さの軸の最小と最大は、フォントの中に書いてある。読み込むときに、それをそのまま範囲として渡す。CSS で読み込むときも同じで、太さは「100 900」のように範囲で書く。可変でないフォントは、今までどおりでいい。

確かめ方

• 太さを端から端まで動かし、黒い画素の数を並べる。同じ数が続く所は、軸が動いていない。
• 「同じ気がする」は判定にしない。数える。
• にせの太字は、太い側で2段以上が同じ数になる。

あなたのつまみは、端から端まで本当に字を変えていますか。

書体は、届くまで別の字で描かれる、の研究を読む →