fontプロパティの使い方と注意点まとめ

見出しと本文を設定しよう

フォントに関する指定をまとめて設定できるfontプロパティの紹介です(^^♪

文字のサイズを変更して太さを変更して行間を変更して・・・、なんてそれぞれ設定するのは面倒すぎ!なんて時にはfontプロパティを使いましょう! ただfontプロパティには守る必要があるルールがありますので、そこらへんも説明していきますね。

目次
システムフォントを指定する場合

フォントプロパティの使い方

フォントプロパティではフォントに関する設定を一括で行う事ができます。 例えばfont-weightとfont-sizeとfont-familyをまとめて設定というように。 まとめて指定できるのは、次のようになってます。

プロパティ 意味
font-style フォントのスタイル(斜体など)の設定
font-variant スモールキャップの設定(日本語では不可)
font-weight フォントの太さの設定
font-size フォントの大きさの設定(省略不可)
line-height 行間(行の高さ)の設定
font-family フォントの種類を設定(省略不可)

日本語環境で指定できるのはfont-variantを除いた5つのみとなっています。 またfontプロパティでまとめて設定する場合は、上記にも省略不可と記載しましたが「font-size」「font-family」は省略できませんのでご注意ください。

記述の仕方

fontプロパティには記述する順番というものがあります。 例えばfont-size、font-weightなど、まとめて設定したい各プロパティの値を指定する際は、次のような順番で記述しなければなりません。

  1. 「font-style」「font-variant」「font-weight」(3つは順不同)
  2. font-size
  3. line-height
  4. font-family

記述する順番は上のような感じでfont-style、font-variant、font-weightの3つは順不同となっています。 省略できるものは記述しなくても大丈夫です。

例えば日本語環境の場合で、すべてのプロパティを設定する際は次のような順番になります。

font-style、font-weight、font-size、line-height、font-family もしくは font-weight、font-style、font-size、line-height、font-family

そして記述方法なのですが、line-heightを設定する場合のみfont-sizeの値との間にスラッシュ「/」を入れる必要があります。

では実際にfontプロパティで記述してみます。 下の例を参考にして下さい。

P {font-size: 10px; }
P {line-height: 1.5em; }
P {font-weight: bold; }
P {font-style: italic; }
P {font-family: verdana,serif; } 

例えば上のようなfontの設定をfontプロパティを使って記述すると下のようになります。

font: bold italic 10px/1.5em verdana,serif;

こんな感じで記述する順番に気をつけてfont-size、line-heightの間にスラッシュ「/」を付けるようにして下さい。

注意点

便利なfontプロパティですが、一つだけ注意点があります。 それはフォントプロパティを使うと、フォント関連の設定は全て初期化された上で、再度指定した値を割り当てられているということ。

ですので「font: inherit;」を使わなかった場合、font-style、font-weight、line-heightなどを省略したとしても値は継承されません。 また正しくない順番で指定してしまうと、思った通りの表示がされず間違いに気づきずらいということもあります。 ですので慣れないうちはfontプロパティは使わない方がいいのかもしれません。

システムフォントを指定する場合

まとめて設定する以外にもfontプロパティでは、システムフォントを指定する事もできます。

ただしシステムフォントを指定する場合は、他の値(font-sizeなどなど)と一緒に指定する事はできません。 ですのでシステムフォント単独で指定する必要があります。 (フォントに関する設定をまとめて行うか、システムフォントを設定するかのどちらか)

※システムフォントはfontプロパティのみで指定可能。font-familyでは指定できないので注意

システムフォント 意味
caption キャプションで使われてるフォント
icon アイコンラベルで使われてるフォント
menu アプリケーションメニューで使われてるフォント
message-box ダイアログで使われてるフォント(メッセージボックスなどで使われてる)
small-caption ツールボックスのタイトルなど小さめなフォント
status-bar ステータスバーなどで使われてるフォント

表示例

p{
  font:status-bar;
}
システムフォントを使う場合はこのように単独で設定しましょう!abcdef

上のような感じでシステムフォント単独で設定して下さいね。 またシステムフォントは閲覧者の環境によって表示が変わりますので、注意して下さい。

以上fontプロパティについてでしたー(^^♪