CSS @font-faceに使用する新しい構文の基礎知識と使い方、format()とtech()、OpenType-SVGとCOLRv1によるカラーフォントの表示

Post on:2023年8月3日

@font-faceの新しい構文のブラウザサポート

CSSの@font-faceの新しい構文は、Safai 17（次のバージョンアップ）, Firefox 106, Chrome 108, Edge 108からサポートされています。

@font-faceによる可変フォントの使用方法

Webサイトに可変フォントを使用したことがある人なら、おそらくこの構文には慣れていると思います。

CSSのformat()関数に"woff2-variations"という文字列を使用します。

@font-face {
    font-family: "source sans";
    src: url("SourceSansVariable.woff2") format("woff2-variations");
}

@font-face {

font-family: "source sans";

src: url("SourceSansVariable.woff2") format("woff2-variations");

}

しかし、上記のCSSは現在では非推奨となっています（ただし、まだ機能します）。
新しいCSSは、下記のようになります。

@font-face {
    font-family: "source sans";
    src: url("SourceSansVariable.woff2") format(woff2) tech(variations);
}

@font-face {

font-family: "source sans";

src: url("SourceSansVariable.woff2") format(woff2) tech(variations);

}

何が変わったのでしょうか？
format()関数は、woff, woff2, opentype, truetypeなどファイルタイプを指定するためだけに使用されます。

フォントにはファイルタイプだけでは分からない技術的な機能があります。たとえば、可変（バリアブル）フォントなのか？カラーフォントなのか？ブラウザがどの技術的な機能に対応しているかをテストするためにtech()関数があります。tech(variations)を設定すると、ブラウザは可変フォントをサポートしている場合にのみファイルを読み込みます（可変フォントはすべてのブラウザにサポートされています）。

2023年7月現在、古い非推奨のCSSの方がブラウザのサポート状況が良いため、新しいCSSへのアップデートはまだしない方がよいかもしれません。

tech()によるカラーフォントの使用方法

現在、すべてのブラウザで機能するカラーフォントの技術はありません（グラデーションをサポートしていない古いCOLRv0フォーマットを除く）。現在標準となっているのは2つあり、FirefoxとSafariでサポートされているOpenType-SVG（非推奨のSVGフォントとは別物）と、FirefoxとChrome/EdgeでサポートされているCOLRv1です。

これは悩ましい状況で、@font-faceでtech()を使用することで、SafariではOpenType-SVGフォントを、FirefoxとChrome/EdgeではCOLRv1フォントを使用することができます。

@font-face {
    font-family: "ComicColor";
    src: url("ComicColor-COLRv1.woff2") format(woff2) tech(variations, color-COLRv1),
         url("ComicColor-SVG.woff2") format(woff2) tech(color-SVG);
    }

@font-face {

font-family: "ComicColor";

src: url("ComicColor-COLRv1.woff2") format(woff2) tech(variations, color-COLRv1),

url("ComicColor-SVG.woff2") format(woff2) tech(color-SVG);

}

すべてのブラウザは長年に渡りwoff2をサポートしているため、わたし達が提供する必要があるのはこのフォーマットだけです。FirefoxはCOLRv1とOpenType-SVGの両方をサポートしています。私はCOLRv1を使用したいので、最初にそのURLを記述しました。

COLRv1フォントについては、可変フォントとCOLRv1の両方のサポートをチェックしています。カンマ区切りのリスト（tech(variations, color-COLRv1)）を使用すれば、複数の機能をテストできます。

OpenType-SVGと可変フォントには、互換性はありません。そして、可変OpenType-SVGフォントというものは存在しないので、2番目のURLのtech()関数（tech(color-SVG)）ではvariationsをテストしません。

これで、カラーフォントが使用できます。

カラーフォントの他の技術（color-COLRv0, color-sbix, color-CBDT）に対するブラウザのサポートもtech()でテストできますが、WebでのカラーフォントにはOpenType-SVGとCOLRv1が最良の選択肢です。

COLRとCOLRv1フォントのカラーパレットは、CSSで簡単に変更できます。ブラウザがこの機能をサポートしている場合のみですが、フォントファイルを条件付きで読み込みたい場合はtech(palettes)を使用します。

tech()で使用できる他の値

可変フォントとカラーフォント以外のtech()で使用できる値は、下記の通りです。

features-opentype
features-aat
features-graphite
incremental

incrementalは、「range-requestまたはpatch-subsetメソッドのいずれかを使用したフォントのインクリメンタルな読み込みのサポート」を指します。詳しくは、W3Cをご覧ください。

features-opentype, features-aat, features-graphiteについてもW3Cの仕様書で読むことができますが、かなりニッチなようです。

@supportsでも同等の機能が使用できる

font-faceにはフォントファイルを条件付きで読み込むためのtech()関数とformat()関数があるように、@supportsにも条件付きCSSのための同等のfont-tech()関数とfont-format()関数があります。

ブラウザサポート

@supportsはSafai 17（次のバージョンアップ）, Firefox 106, Chrome 108, Edge 108以降で、font-tech()とfont-format()をサポートしています。

font-tech()とは

@supportsは、ブラウザがサポートするフォント技術に基づいてCSSを条件付きで適用することができます。font-faceのtech()関数でテストできる値と同じ値が、font-tech()で使用できます。

ブラウザが理解できないCSSルールは、無視されます。それがCSSの素晴らしいところの一つです。@supportsで新しいプロパティを囲む必要もなく、古いブラウザで機能しないことを心配することもなく、font-paletteのような新しい機能を使用することができます。

では、@supportsはどんなときに役立つのでしょうか？たとえば、あるフォントのデフォルトのパレットは白い背景で美しく見えますが、私のカスタムパレットは黒い背景の方が見栄えがするという場合です。

@supports font-tech(palettes) and font-tech(color-COLRv1) {
    body {
        background-color: black;
    }
}

@supports font-tech(palettes) and font-tech(color-COLRv1) {

body {

background-color: black;

}

font-format()とは

font-format()の方は、あまり活躍の場がないかもしれません。font-faceのformat()関数と同じ値が使用できます。

ブラウザがwoff（2012年以降すべてのブラウザでサポートされています）, woff2（現在Web上の最適なフォーマットで、2016年以降すべてのブラウザでサポートされています）, truetype, opentype, embedded-opentype（IEでのみサポートされています）, OpenType collection, svgフォント（非推奨、使用すべきではありません）をサポートしているかどうかを確認できます。