CSS フォントは CSS のモジュールの一つで、フォントに関するプロパティを定義し、どのようにフォントリソースを読み取るのかを定義します。これによって、単一の文字に利用できる複数のフォントがある場合、使用するフォントのスタイルを、例えばフォントファミリ、寸法、太さ、行の高さ、グリフの種類を定義することができます。
基本的な例
以下の例は、テキストの段落をスタイル付けする基本的なフォントプロパティの使い方を示します。
p {
width: 600px;
margin: 0 auto;
font-family: "Helvetica Neue", "Arial", sans-serif;
font-style: italic;
font-weight: 100;
font-variant-ligatures: normal;
font-size: 2rem;
letter-spacing: 1px;
}
<p>Three hundred years ago<br> I thought I might get some sleep<br> I stretched myself out onna antique bed<br> An' my spirit did a midnite creep</p>
結果は以下のようになります。
可変フォントの例
たくさんの可変フォントの例を v-fonts.com および axis-praxis.org で見ることができます。詳しい情報と使い方の情報は、可変フォントガイドも参照してください。
リファレンス
プロパティ
fontfont-familyfont-feature-settingsfont-kerningfont-language-overridefont-optical-sizingfont-sizefont-size-adjustfont-stretchfont-stylefont-synthesisfont-variantfont-variant-alternatesfont-variant-capsfont-variant-east-asianfont-variant-ligaturesfont-variant-numericfont-variant-positionfont-variation-settingsfont-weightline-height
@-規則
ガイド
- テキストとフォントのスタイル付けの基礎
- この初心者向けの学習記事で、基本的なテキストやフォントのスタイル付けを、ウェイト、ファミリとスタイル、 font 一括指定、テキスト配置とその他の効果、行、字間など、詳細にわたって全て通します。
- 可変フォントガイド
- 可変フォントは OpenType フォント仕様書が進化したもので、幅、太さ、スタイルごとに別々のフォントファイルを用意するのではなく、さまざまな種類のフォントを単一のファイルに組み込むことができます。この記事では、可変フォントを使い始めるために必要なことをすべて紹介します。
仕様書
| 仕様書 | 状態 | 備考 |
|---|---|---|
| CSS Fonts Module Level 4 | 草案 | font-feature-settings および font-optical-sizing を追加。 |
| CSS Fonts Module Level 3 | 勧告候補 | |
| CSS Level 2 (Revision 1) | 勧告 | |
| CSS Level 1 | 勧告 | 初回定義 |
ブラウザーの対応
基本フォントプロパティの多く (font-weight や font-style など) はブラウザー間で良く対応されていますが、もっと新しいもののいくつかは対応が限られています。全体としてはそれぞれのリファレンスページにあるブラウザーの対応情報を見る必要があります。