目次を飛ばして本文へ パン屑リストへ
関連プロパティ

font-family

対応状況
N7.0
Win
N6.0
Win
e6.0
Win
e5.5
Win
e5.0
Win
e5.0
Mac
e4.5
Mac
O7.0
Win
O6.0
Win
[[ <ファミリ名> | <総称ファミリ名> ],]* [ <ファミリ名> | <総称ファミリ名> ] | inherit
初期値 UA依存
適用 すべての要素
継承 する
レベル -
メディア visual

文字を描く書体を指定します。HTMLでいう font要素 の face属性 と同様な働きをします。しかし、'font-face'というプロパティはありません。

font要素 の face属性 の場合は、複数のファミリを指定してもまとめて"(二重引用符)か'(一重引用符)で括りましたが、このプロパティの場合はファミリごとに"か'で括らなければなりません。例外的に、ファミリ名に空白類が無く、ASCII文字のみの場合(正確にはIDに指定可能な文字列)は引用符で括る必要はありません。

複数ファミリを指定した場合は、最初に書かれたものから順に、使用可能なファミリが適用されていきます。このように、優先度順に並べられたファミリ名のセットを、フォントセットと呼びます。連続して書く事にはもう一つの意義があり、それは、多言語で文書を書く場合です。この場合、言語ごとに違うファミリが必要になる事もありますし、また意図的にそうしたい場合もあるでしょう。

'font'を利用して、ほかのプロパティとまとめて指定する事も可能です。

例を挙げておきましょう。
body { font-family: "ダサ字", "へた字", "MS Pゴシック", Osaka, monospace}

キーワード解説

ここでは、<ファミリ名> と <総称ファミリ名> という二種類のファミリ名が登場します。これを解説します。

<ファミリ名>(family-name)
選択したフォントファミリの名称です。先の例では、最後の選択肢以外がフォントファミリに当たります。

'で括ると、Windows版 InternetExplorer3.0では認識されなくなってしまいますので、フォント名は"で括るようにしてください。

一般的な日本語のフォントファミリ名を書いておきます。少なくとも、Windows と Macintsh に対応しておきたいところです。大文字・小文字、半角・全角に注意してください。

無論、お手元のパソコンに追加で入れたような特殊なフォントは、適用される可能性はとても少ないです。相手のパソコンにも、そのフォントがインストールされていないといけませんので。
その場合は、表示された文字をキャプチャし、画像化して使うと良いです。普通の文書にこの方法を使うのは避けたほうが賢明でしょう。

汎用的なフォントの中から、好みのものを候補に入れておけば、ある程度好みの状態は保証されるでしょう。以下に、ある程度汎用的なフォントを列挙します。

  • Windows日本語フォント
    • "MS Pゴシック" (ゴシック体のプロポーショナルフォント)
    • "MSゴシック" (ゴシック体の等幅フォント)
    • "MS P明朝" (明朝体のプロポーショナルフォント)
    • "MS明朝" (明朝体の等幅フォント)
  • Macintosh日本語フォント
    • Osaka (ゴシック体のプロポーショナルフォント)
    • "Osaka-等幅" (ゴシック体の等幅フォント)
    • "平成明朝" (明朝体のプロポーショナルフォント)
    • "細明朝体" (明朝体の等幅フォント)
    • "中ゴシック体" (ゴシック体の等幅フォント)
    • "平成角ゴシック" (ゴシック体の等幅フォント)
  • UNIX日本語フォント
    • ?
<総称ファミリ名>(generic-family)
[serif][sans-serif][cursive][fantasy][monospace]の5種類があります。以下の表を参考にしてください。総称ファミリ名はキーワードなので、引用符("や')で括ってはいけません。

上で挙げた例のように、最終的な選択肢として、総称ファミリ名を指定する事が勧められています。このフォントは、追加のフォントをインストールする事で変わり得ます。

serif
線の先端が()ねていたり、裾が太く又は細くなっていたり、実際にひげ飾りが付いていたりするフォントの事です。日本では明朝体などがこれに当たります。

ちなみに、現在ご利用のUAの serif family には、この書体が指定されております。

sans-serif
線の先端が「止め」になっていて、裾の広がりやひげによる装飾が付いていないフォントの事でございます。日本ではゴシック体などが該当します。

ちなみに、現在ご利用のUAの sans-serif family には、この書体が指定されています。

cursive
イタリック体とよく似ていますが、cursiveのほうがより続け度合いが強く、筆記性の高いフォントとされています。敢えて言うなれば草書体のようなものですが(日本語には続け字はありませんので)、日本語のこの種のフォントは、デフォルトでは入っていません。

ちなみに、現在ご利用のUAの cursive family には、この書体が指定されています。

fantasy
装飾がメインになっているものの文字の表現を失ってはいないフォントの事です。同じように、日本語のこの種のフォントは、デフォルトでは入っていません。

ちなみに、現在ご利用のUAの fantasy family には、この書体が指定されています。

monospace
等幅のフォントであれば、すべてこれに当てはまります。

ちなみに、現在ご利用のUAの monospace family には、この書体が指定されています。

ワンポイント・アドバイス最後には総称ファミリを書いておきましょう。

UAがその文字を表現出来るフォントを知らない場合、別のシンボルに置き換えても良い事になっています。可能ならば、「この文字わからなかったよ」というシンボルが良いとの事。

注意点
  1. IDに含める文字以外を含むファミリ名の場合は引用符で括る必要があります。
  2. 最終的な選択肢として、総称ファミリ名を指定しましょう。
  3. fontを併用する場合は、効果の兼ね合いに注意しましょう。
CSS1とCSS2の相違点
  1. CSS2では総称ファミリに詳しい解説がつきました。
  2. CSS1では要素全体に一つのファミリしか採用されませんでしたが(付属書には任意で導入しても良いと記述がありました)、CSS2では言語ごとに違うファミリを適用する事が可能になりました。

page top
最終更新日:2018年07月18日
Copyright © 2002-2018 ばあど All Rights Reserved.