font-weightプロパティ

フォントの太さを指定します。

値)

  • normal (標準)
  • bold (太く)
  • bolder (より太く)
  • lighter (より細く)
  • 100~900 (100単位で指定)

例)

font-weight: bold;

font-styleプロパティ

フォントのスタイルを指定します。

値)

  • normal (標準)
  • italic (イタリック体で表示)
  • oblique (斜体で表示)

例)

font-style: italic;

font-variantプロパティ

アルファベットなどの大文字・小文字を持つフォントをスモールキャピタル表示にするかしないかを指定します。スモールキャピタルとは、英文字の小文字部分の代わりに、大文字を小さくさせたように表示するフォントです。なお、日本語フォントには大文字、小文字がありませんので、指定しても無視されます。

値)

  • normal (標準)
  • small-caps (スモールキャピタル表示)

例)

<span style="font-variant: small-caps;font-size: 116%;">All Right Reserved</span>

表示)

All Right Reserved

font-sizeプロパティ

フォントのサイズを指定します。値は、単位をつけた数値、親要素を基準値とするパーセント( % )で指定します。

単位をつけた数値

例)

font-size: 84%;

line-heightプロパティ

1行の高さを変化させて行の高さを指定します。

値)

  • normal (標準)
  • 倍数 (フォントサイズに対して1.5や、1.2のような倍数)
  • パーセント (%)
  • 長さ (単位をつけた数値)

例)

line-height: 180%;

font-familyプロパティ

フォントの書体を指定します。値は、フォント名、総称ファミリ名で指定します。フォント名で指定すると、訪問者のPCにそのフォントがインストールされていない場合、このプロパティは無視されます。総称ファミリ名で指定した場合、訪問者のPCに設定されているフォントの中から、HP作成者の意図する表示に近いフォントが選択されます。

総称ファミリ名)

  • monospace (MS ゴシックやCourier New等の固定幅書体、等幅表示)
  • sans-serif (ゴシック体やArialのような書体)
  • serif (明朝体のような書体)
  • fantasy (装飾系の書体)
  • cursive (毛筆体、筆記体などの手書き風の書体)

※cursive と fantasy は具体的なフォントが割り当てられていないため、指定してもブラウザに無視されることがあります。

例)

font-family: Arial,'MS Pゴシック',sans-serif;

複数フォントを指定する場合、各フォントは、コンマ( , )で区切り、また、MS Pゴシックのように、フォント名にスペースが含まれる場合、シングルクォーテーション( ' )またはダブルクォーテション( " )の引用符で括ります。

font-familyプロパティでフォントを指定する場合、上記ソースのように、Arialで欧文フォント、MS Pゴシックで和文フォント、さらに、前述フォントが無視される場合の代替フォントとして、sans-serifを指定すると良いでしょう。


fontプロパティ

フォントに関するプロパティをまとめて指定できます。まとめて指定できるプロパティは下記6種類です。

値)

  • 1 font-weight (太さ)(順不同)
  • 1 font-style (斜体)(順不同)
  • 1 font-variant (スモールキャピタル表示をする、しない)(順不同)
  • 2 font-size (フォントサイズ)(必須)
  • 3 line-height (行の高さ / テキスト関連プロパティ)(値の前にスラッシュ)
  • 4 font-family (フォントの種類)(必須)

例)

font: bold italic 84% sans-serif;"

fontプロパティを適用した要素は、フォント関連プロパティが読み込まれるときに値がすべて初期値にリセットされた後指定値が割り当てられます。このため、簡略指定と個別指定を併用する場合は、後に記述された方の適用となります。