Edited at

Variable Fontがブラウザで使えるようになってきた

More than 1 year has passed since last update.


Variable Fontとは?

ひとつのフォントファイルで,いろんなウエイトや効果が実現できる。

それぞれの表現について作り手の指定したパラメータが用意されており,それを変化させることで多彩な表現が可能に。

例えば DECOVAR というフォントでは,以下のような表現が一つのフォントファイルで可能。

Screenshot from 2017-12-13 10-43-07.png


ブラウザ対応状況

Caniuse によると各ブラウザの実装状況はこんな感じ。


サンプル

ウェブフォントとしてVariable Fontの機能を利用する場合は,いまのところCSSで font-variation-settings を使います。

DECOVARの場合は DecovarAlpha.designspace というファイルに Tag が定義されており,例えば "Inline Skelton" は "SKLA","Weight" は "WMX2","Flared" は "TRMB" という Tag が割り当てられています。更に,それぞれの Tag の値の幅が minimummaximum として決められており,この間の値を指定することになります。

<html>

<head>
<style>
@font-face {
font-family: 'Decovar';
src: url('DecovarAlpha-VF.ttf');
}

.deco {
font-family: 'Decovar';
font-size: 72px;
font-variation-settings: 'SKLA' 1000, 'WMX2' 1000, 'TRMB' 1000;
}
</style>
</head>
<body>
<div class='deco'>
Hello, World !!
</div>
</body>
</html>

ちなみに上で指定した値の組合せは DecovarAlpha.designspace では"Fancy"としてあらかじめ登録されています。各アプリケーションではこの stylename を使えるようになっていくはずですが,CSSではいまのところまだです(誰か教えて)。

FontView(Variation Font確認用のMacアプリ)では実装されているので,ぜひ試してみてください。


便利なリンク