フォントバリエーションは、OpenType仕様の一部として定義された新しい機能セットです。 これにより、フォントファイルに可変フォントと呼ばれる単一のファイル内にフォントの複数のバリエーションを含めることができます。 これにより、複数のフォントスタイルを実現できるWeb上の1つのフォントファイルを使用できるようになります。

ページにテキストを表示するためにネットワーク経由で送信する必要のあるデータの順番が明らかに節約されることに加えて、可変フォントは、静的フォントスタイルでは不可能な、フォントスタイルのアニメーション化や遷移、カスタムフォントスタイルなどの機能を有効にします。フォント。

可変フォントの使用例をいくつか見てから、今日のWebでの使用方法を詳しく見ていきましょう。

可変フォントの例

以下の例を正しく表示するには、サポートブラウザを使用する必要があることに注意してください。

SourceSans変数

Source Sansは人気のあるフリーフォントで、現在は可変バージョンで提供されています。 テキストにカーソルを合わせると、font-weightの値をどのように移行できるかを確認できます。

CodePenのalligatorio @alligatorio )によるペンXWdaGLZを参照してください。

そして、これはいくつかの非常に単純なCSSルールを使用して実現されます。

@font-face {
  font-family: 'Source Sans';
  src: url('/assets/fonts/variable/SourceSansVariable-Roman.ttf') format("truetype-variations");
  font-weight: 1 999;
}

.source-sans, .source-sans2, .source-sans3 {
  font-family: 'Source Sans';
  transition: font-weight .45s ease-out;
}

.source-sans:hover, .source-sans2:hover {
  font-weight: 999;
}
.source-sans3:hover {
  font-weight: 200;
}

カスタムフォントスタイル

以下に、すべて同じフォント Decovar を使用した例をいくつか示します。これは、カスタム軸を定義し、一意の定型化されたテキストを可能にする可変フォントです。

CodePenのalligatorio @alligatorio )によるペンRwaZdXXを参照してください。

そのために使用されるCSSルールは次のとおりです。

@font-face {
  font-family: Decovar;
  src: url('/assets/fonts/variable/DecovarAlpha-VF.subset.ttf') format("truetype-variations");
}

.decovar, .decovar2, .decovar3 {
  font-family: Decovar;
}

.decovar {
  color: var(--green3);
  font-variation-settings: "BLDA" 506.944, "TRMC" 1000, "TRMK" 324.653;
}
.decovar2 {
  color: hotpink;
  font-variation-settings: "WMX2" 580.838, "TRMB" 1000;
}
.decovar3 {
  color: rebeccapurple;
  font-variation-settings: "TRMF" 159.18, "TRME" 1000;
}

実際の例をいくつか見てきたので、いくつかの概念と、独自のWebページで可変フォントを使用する方法を見ていきましょう。

フォント軸

可変フォントは、バリエーションの軸を介してバリエーションを定義します。 5つの標準軸があります。

  • ital:斜体を制御します。 値は、font-styleCSSプロパティを使用して設定できます。
  • opsz:フォントの光学サイズを制御します。 値は、font-optical-sizingCSSプロパティを使用して設定できます。
  • slnt:フォントの傾きを制御します。 値は、font-styleCSSプロパティを使用して設定できます。
  • wght:フォントの太さを制御します。 値は、font-weightCSSプロパティを使用して設定できます。
  • wdth:フォントの幅を制御します。 値は、font-stretchCSSプロパティを使用して設定できます。

フォントはカスタム軸を指定することもできます。これらには、標準軸の4文字の小文字の名前ではなく、4文字の大文字の名前を付ける必要があります。 上でデモしたDecovarフォントは、多数のカスタム軸を使用するフォントの代表的な例です。

標準軸は既知のCSSプロパティで設定でき(例:wdthfont-weightで設定)、新しいCSSfont-variation-settingsは軸の値を制御するために使用されますそうでなければ。

たとえば、ここではNobotoFlex可変フォントのスタイルを定義します。

h1 {
  font-variation-settings: "BASE" 500, "SPAC" 200, "wght" 322, "HEIG" 456;
}

あるいは、次のように定義することもできます。

h1 {
  font-weight: 322
  font-variation-settings: "BASE" 500, "SPAC" 200, "HEIG" 456;
}

CSSプロパティを持つ軸にはネイティブCSSプロパティを使用することをお勧めします。

フォントは5つの標準軸すべてを実装する必要はないことに注意してください。代わりに、フォントのドキュメントを参照して、制御できる軸を確認する必要があります。

また、font-weightは、これまでの100値の増分と比較して、1〜999の任意の値をとることができることにも注意してください。

@font-faceで可変フォントを使用する

Webで可変フォントを使用するには、 @font-可変フォントファイルを指すフェイスルールを定義する必要があります。 以下はそれがどのように行われるかの簡単な概要ですが、クロスブラウザのサポートについて学びたいと思うかもしれないいくつかの警告があります。

ここでは、たとえば、Source Sansフォントファミリの2つのバージョンを定義します。1つは通常のフォントで、もう1つは太字です。 どちらのバージョンも同じ可変フォントファイルを使用しますが、可変フォントをサポートしないブラウザのフォールバックとして異なるフォントファイルを使用します。

@font-face {
  font-family: 'Source Sans';
  src: url('/path/to/SourceSansVariable.woff2') format("woff2-variations");
  src: url('/path/to/SourceSans.woff2') format("woff2");
  font-weight: 400;
}

@font-face {
  font-family: 'Source Sans';
  src: url('/path/to/SourceSansVariable.woff2') format("woff2-variations");
  src: url('/path/to/SourceSansBold.woff2') format("woff2");
  font-weight: 900;
}

そして、通常どおりCSSルール内で使用できるようになりました。

h1 {
  font-family: 'Source Sans';
  font-weight: 900;
}

h2 {
  font-family: 'Source Sans';
  font-weight: 400;
}

@font -faceルールで範囲を指定して、通常のCSSルール内で可能なすべての値を使用できるようにすることもできます。

@font-face {
  font-family: 'Source Sans';
  src: url('/path/to/SourceSansVariable.woff2') format("woff2-variations");
  src: url('/path/to/SourceSans.woff2') format("woff2");
  font-weight: 1 999;
}

上記により、font-weightプロパティに1から999までの任意の値を使用できるようになりました。 サポートされていないブラウザは、normalのフォントの太さの値を使用します。

利用可能なフォント

V-fonts.com で、現在利用可能なほとんどの可変フォントを見つけて操作できます。 いくつかの注目すべきオープンソースのものは、BarlowMutador SansSource SansAmstelvar、およびCabin VFです。

一部は、アーリーアクセスフォントとしてGoogleFontsから入手することもできます。

TTFからWOFF2

フォントファイルは多くの場合TrueType形式( ttf )で提供されますが、Webの場合は、スペースを節約するためにフォントファイルをWOFF2形式に圧縮することをお勧めします。 FontTools などのツールを使用して、フォントファイルをWOFF2として圧縮できます。 よりユーザーフレンドリーなGUIまたはオンラインツールは、まもなく利用可能になるでしょう。

ブラウザのサポート

可変フォントのサポートはすでにかなり良いなので、理論的には今日から使用を開始できます。 ただし、サポートに関するいくつかの注意事項がありますが、CSSフォントモジュールレベル4の一部としてCSS内で使用するために、まだいくつかの問題が解決されています。 これが素晴らしい要約です。現時点でまだ流動的です。

リソースとツール

Webでの可変フォントの使用についての理解を深めたい場合は、次の資料を参照してください。

そして、可変フォントを簡単にテストして見つけることができる2つのツールがあります。