CSS フォント

CSS font プロパティは、テキストのフォント・ファミリ、太さ、サイズ、スタイルを定義します。

SerifとSans-serif フォントとの違い

CSS フォント・ファミリ

CSS には、2 種類のフォントファミリー名があります:

総称ファミリ - 同じ様な外観を持つフォント・ファミリのグループ(例 "Serif" や "Monospace")
フォント・ファミリ - フォント・ファミリの指定(例 "Times New Roman" や "Arial")

総称ファミリ	フォント・ファミリ	説明
Serif	Times New Roman Georgia	Serif フォントには、一部の文字の最後に小さなヒゲがあります
Sans-serif	Arial Verdana	"Sans" は、「～がない」との意です - このフォントには、文字の最後にヒゲがありません
Monospace	Courier New Lucida Console	monospace は、全文字が同じ幅のフォントです

注: sans-serif フォントは、コンピュータスクリーン上で、 serif フォントより読み易くなるように考えられたものです。

フォント・ファミリ

テキストのフォント・ファミリは、font-family プロパティで設定します。

font-family プロパティは、"フォールバック" システムとして、複数のフォント名を指定する必要があります。ブラウザが、最初のフォントをサポートしていない場合、次のフォント以降が順に試されます。

あなたの希望するフォントからスタートしますが、どのフォントも使用できない場合、ブラウザに同じようなフォントを総称ファミリから選択させることができるように、総称ファミリで終ります。

注: フォント・ファミリ名が、複数の単語からなる場合は、次のように引用符で括らなければなりません: "Times New Roman"。

複数のフォント・ファミリは、カンマ区切りのリストで指定します:

例

p {
font-family: "Times New Roman", Times, serif;
}

Try it Yourself ❯

一般的なフォントの組合せは、Web セーフフォントの組合せをご覧ください。

フォント・スタイル

font-style プロパティは、大抵はイタリック体のテキストを指定するのに使用します。

このプロパティには、3 種類の値があります:

normal - テキストは、正体で表示される
italic - テキストは、イタリック体で表示される
oblique - テキストは、"leaning"(斜体)で表示される (obliqueは、非常にイタリック体に似ているが、サポートが少ない)

例

p.normal {
    font-style: normal;
}

p.italic {
    font-style: italic;
}

p.oblique {
    font-style: oblique;
}

Try it Yourself ❯

フォント・サイズ

font-size プロパティは、テキスト・サイズを設定します。

テキストサイズの管理ができることは、web デザインでは重要です。しかし、段落を見出しのように見せたり、見出しを段落のように見せるために、フォントサイズの調整に使用してはいけません。

見出しには <h1> - <h6>、段落には <p> のように、適切な HTML タグを常に使用するようにしてください。

font-size 値には絶対サイズと相対サイズがあります。

絶対サイズ:

テキストを指定のサイズに設定する
すべてのブラウザにおいて、ユーザにテキストサイズ変更を許容しない（アクセシビリティの悪化が理由）
絶対サイズは、出力の物理的なサイズが分っている時に有益

相対サイズ:

周囲の要素との相対的なサイズを設定
ユーザ別に、ブラウザのテキストサイズ変更を可能にする

注: If you do not specify a font size, the default size for normal text, like paragraphs, is 16px (16px=1em).

ピクセルによるフォント・サイズの設定

ピクセルによるテキストサイズの設定は、テキストサイズを完全にコントロールできるようになります:

例

h1 {
    font-size: 40px;
}

h2 {
    font-size: 30px;
}

p {
    font-size: 14px;
}

Try it Yourself ❯

チップ: ピクセルを使用する場合、ページ全体のサイズを変更するためにズームツールを使用することができます

emによるフォント・サイズ設定

ユーザが、（ブラウザメニューで）テキストをリサイズできるようにするために、多くの開発者はピクセルの代わりに em を使っています。

em サイズ単位は、W3C により勧告されています。

1em は、現在のフォントサイズと同じです。ブラウザのデフォルト・テキストサイズは 16px であるため、 1em のデフォルトサイズは 16px です。

次の式を使用することで、ピクセルから em を計算できます: pixels/16=em

例

h1 {
    font-size: 2.5em; /* 40px/16=2.5em */
}

h2 {
    font-size: 1.875em; /* 30px/16=1.875em */
}

p {
    font-size: 0.875em; /* 14px/16=0.875em */
}

Try it Yourself ❯

上の例における、em によるテキストサイズは、ピクセルによる前の例と同じです。しかし、サイズに em を使用することで、すべてのブラウザのテキストサイズを調整することが可能になります。

あいにく、旧バージョンの IE にはまだ問題があります。テキストを、大きくするとそれ以上に大きくなり、小さくするとそれ以上に小さくなってしまいます。

パーセントと em を組合せて使う

全てのブラウザで動くようにするための解決策は、<body> 要素へパーセントでデフォルトの font-size を設定することです:

例

body {
    font-size: 100%;
}

h1 {
    font-size: 2.5em;
}

h2 {
    font-size: 1.875em;
}

p {
    font-size: 0.875em;
}

Try it Yourself ❯

コードは現在、素晴らしいものになりました! 全ブラウザが、同じサイズのテキストを表示するようになり、ズームやテキストのリサイズができるようになりました !

フォントの太さ

font-weight プロパティは、フォントの太さを指定します：

例

p.normal {
font-weight: normal;
}

p.thick {
font-weight: bold;
}

Try it Yourself ❯

フォント Variant

font-variant プロパティは、テキストをスモールキャップ・フォントで表示するかどうかを指定します。

スモールキャップフォントでは、小文字はすべて大文字に変換されます。しかし、変換後の大文字は、テキストの元の大文字よりも小さなフォントサイズで表示されます。

例

p.normal {
font-variant: normal;
}

p.small {
font-variant: small-caps;
}

Try it Yourself ❯

その他の例

1 回の宣言で全フォント・プロパティを設定
この例は、1 回の宣言でフォントプロパティのすべてを設定するためのショートハンド・プロパティを使用する方法のデモです。

練習問題で確認テスト！

Exercise 1 ❯ Exercise 2 ❯ Exercise 3 ❯ Exercise 4 ❯ Exercise 5 ❯

全ての CSS フォントプロパティ

プロパティ	説明
font	1 回の宣言で全フォント・プロパティを設定する
font-family	テキストのフォント・ファミリを指定する
font-size	テキストのフォント・サイズを指定する
font-style	テキストのフォント・スタイルを指定する
font-variant	small-caps フォントでテキストを表示するかどうかを指定する
font-weight	フォントの太さを設定する

❮ 前章へ次章へ ❯