CSS フォント

CSS フォントモジュールは、フォント関連のプロパティと、フォントリソースを読み込む方法を定義します。フォントファミリ、サイズ、太さなどのフォントのスタイル設定や、単一の文字に複数の字体が利用できる場合に使用する字体バリエーションを定義することができます。

フォントは、文字の視覚的表現を格納したリソースファイルであり、文字コードをある書体の文字、数字、句読点、さらには絵文字を表す字体に割り当てられるものです。フォントファミリは、共通のデザインスタイルとフォントプロパティを共有するフォントのグループであり、グループの各メンバーは、ストロークの太さ、傾き、相対的な幅、他にも様々な属性によって異なる字体の表示方法を提供します。フォントは一般的に、単一のスタイル設定を表します。例えば太字かつイタリックの Helvetica などです。フォントファミリは完全な一連のスタイルです。このようなフォントを文書やデザイン内に含めるには、フォントリソースごとに別個の @font-face 宣言を定義します。

CSS フォントモジュールのプロパティ、アットルール、記述子によって、フォントの複数のバリエーションをダウンロードすることができます。また、特定のフォント特性に対して使用するフォントファイルを定義し、リソースの読み込みに失敗した場合の代替フォント指示も定義します。 CSS フォントの選択メカニズムは、指定された一連の CSS フォントプロパティを単一のフォントフェイスと照合するプロセスを記述します。

CSS フォントモジュールは可変フォントにも対応しています。各スタイルが別個のフォントファイルとして実装される通常のフォントとは異なり、可変フォントはすべてのスタイルを単一のファイルに格納することができます。単一の @font-face 宣言を使用することで、すべてのスタイル設定を含む可変フォントをインポートすることができます。フォントによっては、多数のフォント変化形を含めることができます。可変フォントは OpenType フォント仕様の一部です。

リファレンス

プロパティ

アットルール

アットルール: @font-face

記述子:

アットルール: @font-feature-values

記述子:

アットルール: @font-palette-values

記述子:

データ型

font-size 型:

font-family 型:

font-feature-settings 型:

font-format 型:

font-stretch 型:

font-tech 型:

font-variant 型:

font-variant-ligatures 型:

font-variant-numeric 型:

font-weight 型:

インターフェイス

ガイド

テキストとフォントのスタイル設定の基礎

この初心者向けの学習記事では、テキストとフォントのスタイル設定の基本に応じた内容を扱っています。 font 一括指定を使ってフォントの太さ、ファミリ、スタイルを設定する方法や、テキストの配置、行間や字間を管理する方法などに応じた内容となっています。

学習: ウェブフォント

この初心者向け学習記事では、ウェブページでカスタムフォントを使用して、より多様で独自のテキストスタイル設定を実現する方法を説明します。

OpenType フォント特性ガイド

フォント特性または変化形は、 OpenType フォントに含まれている様々な字形や文字スタイルを参照します。これらには合字 ('fi' や 'ffl' のような特殊な形の文字の組み合わせ)、カーニング (特定の字形の組み合わせにおける間隔の調整)、分数、数字のスタイル、他にもたくさんあります。これらはすべて OpenType の特性として参照され、特定のプロパティや低水準の制御プロパティ — font-feature-settings を通してウェブ上で使用することができます。この記事は、 CSS で OpenType フォント特性を使用することについて知る必要があるすべてのことを紹介します。

可変フォントガイド

この記事は可変フォントを使用し始めるのに役立つでしょう。

フォントのパフォーマンスの改善

CSS パフォーマンスガイドの一部であるこの記事では、フォントの読み込み、要求されるグリフのみの読み込み、 font-display 記述子によるフォント表示の動作を定義することについて説明しています。

関連概念

仕様書

Specification
CSS Fonts Module Level 4

関連情報