font-variation-settings - Variable Fontの機能を利用する
font-variation-settingsは、Variable Font(OpenType、またはTrueType)の各バリエーションを利用するプロパティです。フォントは従来、例えば細字と太字には2つのファイルが必要でしたが、1つのファイルに様々なバリエーションを含め、ユーザー側で自由に調整できるように軽量化したのがVariable Fontです。
概要
- 名前
- font-variation-settings
- 値
- normal | [ <string> <number>] #
- 初期値
- normal
- 適用対象
- 全ての要素。
- 継承
- する。
- パーセンテージ
- N/A
- メディア
- visual
- 計算値
- as specified
- アニメーションの可否
- yes (see description)
- 仕様書
- https://drafts.csswg.org/css-fonts-4/#font-variation-settings-def
説明
"機能名" 値
を1組とし、複数指定する場合はコンマ(,)で区切ります。normalを指定した場合、フォントは何も変形されません。
存在しない機能を指定すると無視されます。
下限、または上限を超える値を指定すると、最も近い値が適用されます。
同じ機能を重複して指定すると、後方に指定したものが優先されます。
チュートリアル
このプロパティは、Variable Fontに対応したフォントを使用していることが前提です。Macの場合はSkiaというフォントがインストールされていると思います。
p {
font-family: Skia, sans-serif ;
}
値の指定方法ですが、1つの機能は"機能名" 値
という形式で指定します。下記は"wght"(太さ)という機能に700という値を指定した例です。
p {
font-variation-settings: "wght" 700 ;
}
複数の機能を指定するにはコンマ(,)で区切ります。
p {
font-variation-settings: "wght" 700, "wdth" 75 ;
}
デモ
font-variation-settingsのデモです。1つのフォントで太さや幅など自由に変形させることができます。
<!-- このコードは編集できます。 -->
<!DOCTYPE html>
<html>
<head>
<style>
p {
font-family: "Skia" ;
font-size: 48px ;
}
.hoge {
font-variation-settings: normal ;
}
.fuga {
font-variation-settings: "wght" 4 ;
}
.piyo {
font-variation-settings: "wght" 4, "wdth" 2 ;
}
</style>
</head>
<body>
<p class="hoge">SYNCER</p>
<p class="fuga">SYNCER</p>
<p class="piyo">SYNCER</p>
</body>
</html>
アニメーションにも対応しています。
<!-- このコードは編集できます。 -->
<!DOCTYPE html>
<html>
<head>
<style>
p {
font-family: "Skia" ;
font-size: 48px ;
animation: 3s infinite alternate syncer ;
}
@keyframes syncer {
from {
font-variation-settings: "wght" 1, "wdth" 1 ;
}
to {
font-variation-settings: "wght" 4, "wdth" 2 ;
}
}
</style>
</head>
<body>
<p>SYNCER</p>
</body>
</html>
サポート状況
Chrome | Firefox | Safari | Edge | IE | Opera | iOS Safari | Android |
---|---|---|---|---|---|---|---|
● 62+ | × | × | × | × | × | × | × |
関連記事
- XMLHttpRequest.OPENED
- OPENEDは、XMLHttpRequestの定数です。1を返します。この値は、open()で通信先の設定がされ、まだsend()で通信を開始していない状態であることを表します。
- UNIXタイムスタンプを取得する
- JavaScriptでPHPのtime()、strtotime()と同じようにUNIX TIMESTAMPを取得します。
- 画像に変換する
- Canvasを画像に変換するには、toDataURL()やtoBlob()を利用します。
- 要素の位置座標を取得する
- 指定した要素の位置座標を取得します。