CSS フォント設定

CSS フォント属性は、テキストのフォントファミリー、サイズ、太字、スタイル（例えば斜体）および変形（例えば小文字大文字）を定義します。

CSS 字体系列

CSS では、字体系列名の 2 種の異なるタイプがあります：

  • 一般的な字体系列 - 外観が似た字体システムの組み合わせ（例えば "Serif" または "Monospace"）
  • 特定字体系列 - 具体的な字体系列（例えば "Times" または "Courier"）

特定の字体系列に加えて、CSS では 5 種の一般的な字体系列が定義されています：

  • Serif フォント
  • Sans-serif フォント
  • Monospace フォント
  • Cursive フォント
  • Fantasy フォント

字体系列に関する詳細な情報を知りたい場合は、以下を参照してください： CSS 字体系列。

指定字体系列

使用 font-family 属性 テキストの字体系列を定義します。

一般的な字体系列の使用

ドキュメントに sans-serif フォントを使用したいが、どの字体が良いか気にしない場合、以下のような宣言が適しています：

body {font-family: sans-serif;}

実際に試してみてください

これにより、ユーザーエージェントは sans-serif 字体系列から字体を選択し（例えば Helvetica）、それを body 要素に適用します。継承があるため、この字体選択は body 要素に含まれるすべての要素にも適用されますが、より特定のセレクタがそれをオーバーライドする場合を除きます。

指定字体系列

一般的な字体系列を使用するだけでなく、font-family 属性でより具体的な字体を設定することもできます。

以下の例では、すべての h1 要素に Georgia フォントを設定しています：

h1 {font-family: Georgia;}

実際に試してみてください

このルールはまた、ユーザーエージェントに Georgia フォントがインストールされていない場合、h1 要素にはユーザーエージェントのデフォルトの字体を使用して表示するという別の問題を引き起こします。

特定の字体名と一般的な字体系列を組み合わせることで、この問題を解決できます：

h1 {font-family: Georgia,} serif;}

実際に試してみてください

読者が Georgia をインストールしていない場合でも、Times フォント（serif 字体系列の字体の1つ）をインストールしている場合、ユーザーエージェントは h1 要素に Times を使用する可能性があります。Times は Georgia とは完全に一致していないものの、少なくとも十分に近いです。

したがって、すべての font-family ルールに一般的な字体系列を提供することをお勧めします。これにより、ユーザーエージェントがルールに一致する特定の字体を提供できない場合に、候補字体を選択できる後手があります。

もし字体に非常に詳しい場合、指定された要素に似た字体のシリーズを指定することもできます。これを行うには、それらの字体を優先順位に従って並べ、カンマで接続する必要があります：

p {font-family: Times, TimesNR, 'New Century Schoolbook',}}
     Georgia, 'New York', serif;}

実際に試してみてください

このリストに基づいて、ユーザーエージェントはリストの順序に従ってこれらのフォントを検索します。リストに記載されているすべてのフォントが利用できない場合、シリアルフォントを選択します。

クォートの使用

おそらく気づいたかもしれませんが、上記の例ではシングルクォートを使用しています。フォント名にスペースが1つ以上含まれている場合（例：New York）または、#や$などのシンボルが含まれている場合、font-family宣言にクォートを追加する必要があります。

シングルクォートまたはダブルクォートが受け入れられますが、HTMLのstyle属性にfont-family属性を置く場合、その属性自体が使用していないクォートを使用する必要があります：

<p style="font-family: Times, TimesNR, 'New Century Schoolbook', Georgia,
 'New York', serif;">...</p>

実際に試してみてください

フォントスタイル

font-style 属性最もよく使用されるのは、斜体テキストを規定するためです。

この属性には3つの値があります：

  • normal - テキストを通常表示
  • italic - テキストを斜体表示
  • oblique - テキストを傾斜表示

例

p.normal {font-style:normal;}
p.italic {font-style:italic;}
p.oblique {font-style:oblique;}

実際に試してみてください

italic と oblique の違い

font-style は非常にシンプルです：normal テキスト、italic テキスト、および oblique テキストの間で選択するために使用されます。少し複雑なのは、italic テキストと oblique テキストの違いを明確にすることです。

斜体（italic）は、簡単なフォントスタイルで、各文字の構造に少しの変更を加えて、変化した外観を反映します。これとは対照的に、倾斜（oblique）テキストは通常の垂直テキストの傾斜したバージョンです。

通常、italic と oblique のテキストはウェブブラウザでは全く同じように見えます。

フォント変形

font-variant 属性小文字大写字母を設定できます。

小文字大写字母は、通常の大文字でもなく、小文字でもありません。この文字は、異なるサイズの大文字を使用しています。

例

p {font-variant:small-caps;}

実際に試してみてください

フォント加粗

font-weight属性テキストの太さを設定します。

boldキーワードを使用してテキストを太字に設定できます。

キーワード100 ~ 900はフォントに9段階の太さを指定します。これらの太さレベルがフォントに内蔵されている場合、これらの数字は直接プレ定义されたレベルにマッピングされます、100は最も細いフォント変形、900は最も太いフォント変形に対応します。数字400はnormalに等価であり、700はboldに等価です。

要素の太さをbolderに設定すると、ブラウザは継承された値よりも太いフォント太さを設定します。これに対して、キーワードlighterはブラウザが太さを下げるのではなく、上げます。

例

p.normal {font-weight:normal;}
p.thick {font-weight:bold;}
p.thicker {font-weight:900;}

実際に試してみてください

フォントサイズ

font-size属性テキストのサイズを設定します。

テキストのサイズを管理する能力はwebデザイン分野で重要ですが、テキストのサイズを調整してパラグラフがタイトルのように見えるようにしたり、タイトルがパラグラフのように見えるようにしたりすることは避けるべきです。

常に正しいHTMLタイトルを使用してください、例えば<h1> - <h6>を使用してタイトルをマークし、<p>を使用してパラグラフをマークします。

font-sizeの値は絶対値または相対値でできます。

絶対値：

  • テキストの指定されたサイズに設定します
  • ユーザーがすべてのブラウザでテキストサイズを変更することを許可しない（アクセス性に不利）
  • 絶対サイズは出力する物理サイズが決まった場合に非常に有用です

相対サイズ：

  • 周囲の要素に対してサイズを設定する
  • ユーザーがブラウザでテキストサイズを変更することを許可する

注意：フォントサイズを指定していない場合、通常のテキスト（例えば段落）のデフォルトサイズは16ピクセルです（16px=1em）。

フォントサイズをピクセルで設定する

ピクセルでテキストサイズを設定することで、テキストサイズを完全に制御できます：

例

h1 {font-size:60px;}
h2 {font-size:40px;}
p {font-size:14px;}

実際に試してみてください

Firefox、Chrome、Safariでは上記の例のテキストサイズを再調整できますが、Internet Explorerではできません。

テキストサイズをブラウザの拡大ツールで調整することはできますが、これは実際にはページ全体の調整であり、テキストに限りません。

フォントサイズをemで設定する

インターネットエクスプローラーでテキストの調整ができない問題を避けるために、多くの開発者がピクセル単位ではなくem単位を使用しています。

W3Cはem単位の使用を推奨しています。

1emは現在のフォントサイズです。要素のfont-sizeが16ピクセルの場合、その要素に対して1emは16ピクセルです。フォントサイズを設定する際には、emの値は親要素のフォントサイズに応じて変化します。

ブラウザ内のデフォルトのテキストサイズは16ピクセルです。したがって、1emのデフォルトサイズは16ピクセルです。

以下の公式を使用してピクセルをemに変換できます：ピクセル/16=em

（注：16は親要素のデフォルトのフォントサイズです。親要素のfont-sizeが20pxの場合、この式を変更する必要があります：ピクセル/20=em）

例

h1 {font-size:3.75em;} /* 60px/16=3.75em */
h2 {font-size:2.5em;}  /* 40px/16=2.5em */
p {font-size:0.875em;} /* 14px/16=0.875em */

実際に試してみてください

上記の例では、em単位のテキストサイズは前の例のピクセル単位のテキストと同じです。ただし、em単位を使用すると、すべてのブラウザでテキストサイズを調整できます。

しかし、IEではまだ問題があります。テキストサイズをリセットすると、通常のサイズよりも大きくなったり小さくなったりします。

パーセントとEMを組み合わせて使用

すべてのブラウザで効果的な方法は、body要素（親要素）にパーセントでデフォルトのfont-size値を設定することです：

例

body {font-size:100%;}
h1 {font-size:3.75em;}
h2 {font-size:2.5em;}
p {font-size:0.875em;}

実際に試してみてください

私たちのコードは非常に効果的です。すべてのブラウザで同じテキストサイズを表示し、すべてのブラウザでテキストサイズの拡大を許可します。

CSS フォントの例：

テキストのフォントを設定
この例では、テキストのフォントを設定する方法を示します。
フォントのサイズを設定
この例では、フォントのサイズを設定する方法を示します。
フォントのスタイルを設定
この例では、フォントのスタイルを設定する方法を示します。
フォントの異体を設定
この例では、フォントの異体を設定する方法を示します。
フォントの太さを設定
この例では、フォントの太さを設定する方法を示します。
すべてのフォント属性が1つの宣言内に含まれます
この例では、簡略属性を使用してフォント属性を1つの宣言内に設定する方法を示します。

CSS フォント属性

属性 説明
font 簡略属性です。すべてのフォントの属性を1つの宣言で設定するために使用されます。
font-family フォントファミリーを設定します。
font-size フォントのサイズを設定します。
font-size-adjust 既定のフォントが利用できない場合、代替フォントをインテリジェントにスケーリングします。（CSS2.1ではこの属性が削除されました。）
font-stretch フォントを水平に伸ばします。（CSS2.1ではこの属性が削除されました。）
font-style フォントスタイルを設定します。
font-variant 小文字大文字または通常のフォントでテキストを表示します。
font-weight フォントの太さを設定します。