Text styles

この文書ではテキストスタイルについて、いくつかのサンプルを提示します。

サンプルスタイルシートを、異なるフォントを利用するように編集することになります。

CSS はテキストのスタイルについていくつかのプロパティーを定義しています。

短い名前で簡単に利用できる font といういくつかの値を設定可能なプロパティーがあります。たとえば以下のものを設定できます。

Example
p {font: italic 75%/125% "Comic Sans MS", cursive;} このルールによりいくつかのフォントプロパティーが設定されます。全てのパラグラフを斜体にします。フォントサイズは親要素の 75% に設定され、行間隔は 125% に設定されます。(通常より少し間隔が広がります。) フォントフェースは Comic Sans MS に設定されますが、利用できなければブラウザは既定の cursive フォントを適用します。それ以外の効果、太字と小さな大文字の効果は無効化されます。(これらを `normal` に設定します。)

文書を読む人がどのようなフォントを持っているかを予測する必要があります。つまり、フォントフェースを指定する場合、優先したい順に代替リストを指定するのがよいアイデアです。

そして、リストの最後をビルトインのデフォルトフェースのうちの一つにしましょう。: serif, sans-serif, cursive, fantasy や monospace (これらのいくつかはあなたのブラウザオプションの設定にあるものと一致するでしょう。)

もしフェースが文書中のいくつかの文字をサポートしていなければ、ブラウザは異なるフェースから借りてきます。たとえば、文書がフォントがサポートしていない特殊な文字を利用している場合などです。もし、ブラウザがそれらの文字をもつ他のフォントを発見した場合、そのフォントが利用されます。

フォントフェースのみを指定する場合、font-family プロパティーが利用できます。

Mozilla ブラウザの利用者は既定のフォントサイズをオプションで指定でき、また読んでいる途中にもサイズ変更が可能です。このため、どの部分でも相対サイズを指定する方がいいでしょう。

フォントサイズにはいくつかの既定値が利用可能です。small, medium そして large です。これら以外にも親要素との相対サイズとして、smaller, larger, 150% や 1.5 などの指定も可能です。

もし実サイズを指定する必要がある場合、12px (12 ピクセル) の書式を表示デバイスに、12pt (12 ポイント) の書式をプリンタ用に利用してください。このサイズは文字 m の幅を基準に指定ますが、フォントによっては指定したサイズと異なって表示されます。

フォントサイズのみを指定する場合、font-size プロパティーが利用できます。

行高さは、行間の間隔を指定します。たくさんの行を持つ長いパラグラフがある場合、特にフォントサイズが小さい場合などは、通常より広げることで読みやすくなります。

行高さのみを指定する場合、line-height プロパティーが利用できます。

text-decoration プロパティーで上記以外のスタイルを指定できます。たとえば、underline や line-through など。この設定値を none にすることで追加の装飾をなしにできます。

イタリック体にする場合、font-style: italic;
太字にする場合、font-weight: bold;
小さな大文字にする場合、font-variant: small-caps;

これらを独立になくす場合、値に normal か inherit を指定してください。

More details
テキストスタイルをいくつかの方法で指定できます。たとえば、上記のいくつかのプロパティーは利用可能なほかの値をもちます。複雑なスタイルシートでは、(独立して指定されているプロパティーを初期化するなどの) 副作用を防ぐために短縮形である `font` プロパティーを用いない方がいいでしょう。フォントに関連するプロパティーの全一覧は CSS21 フォントを参照してください。文字列装飾に関する詳細全体は CSS21 テキストを参照してください。

簡単な文書では、BODY エレメントにフォントを設定して、残りではその設定を継承する形で設定します。

あなたの CSS ファイルを編集しましょう。定義にフォントの設定変更を加えます。 CSS ファイルの先頭が論理的によい場所でしょうが、どこに置いても同じ効果です。

body {font: 16px "Comic Sans MS", cursive;}

ルールを延ばしてコメントを追加し、あなたの好みのレイアウトにするために空白を追加してください。

ブラウザ上で再読み込みして、適用してください。もし、システムにある Comic Sans MS かそれ以外の cursive フォントがイタリック体をサポートしていなければ、ブラウザはそれ以外のイタリック体をサポートするフォントを先頭の行に適用するでしょう。

Cascading Style Sheets

ブラウザのメニューバーから、表示 – 文字サイズ – 大きく、を選択してください。 16 ピクセルをスタイルで指定しましたが、文書を読むユーザが文字サイズを変更可能なことが分かるでしょう。

Challenge

他になにも変更せずに、合計 6 文字ある全ての先頭文字をブラウザの既定の serif フォントサイズの二倍に指定してください。

Cascading Style Sheets

あなたのサンプル文書は、すでにいくつかの名前付きの色を利用しています。次のページでは、標準的な色の名前を列記し、それら以外をどのように指定するかについて述べます。色

ドキュメントのタグと貢献者