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 で見ることができます。詳しい情報と使い方の情報は、可変フォントガイドも参照してください。

• font
• font-family
• font-feature-settings
• font-kerning
• font-language-override
• font-optical-sizing
• font-size
• font-size-adjust
• font-stretch
• font-style
• font-synthesis
• font-variant
• font-variant-alternates
• font-variant-caps
• font-variant-east-asian
• font-variant-ligatures
• font-variant-numeric
• font-variant-position
• font-variation-settings
• font-weight
• line-height

• @font-face
• @font-feature-values

テキストとフォントのスタイル付けの基礎

この初心者向けの学習記事では、テキスト/フォントのスタイル付けの基本的な部分をすべて詳しく説明しています。フォントの太さ、ファミリー、スタイルの設定、フォントの一括指定、テキスト配置などの効果、行と文字の間隔の設定などです。

OpenType フォント特性ガイド

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

可変フォントガイド

可変フォントは OpenType フォント仕様が進化したもので、幅、太さ、スタイルごとに別々のフォントファイルを用意するのではなく、さまざまな種類のフォントを単一のファイルに組み込むことができます。この記事では、可変フォントを使い始めるために必要なことをすべて紹介します。