SYNCERのロゴ
アイキャッチ画像

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>

サポート状況

ChromeFirefoxSafariEdgeIEOperaiOS SafariAndroid
62+×××××××
  • Twitterでシェア
  • Facebookでシェア
  • Google+でシェア
  • はてなブックマークでシェア
  • pocketに保存
  • LINEでシェア
更新履歴
2017年10月20日 (金)
コンテンツを公開しました。