XHTML/CSS・トップ | CSSプロパティ・目次

●フォントの指定

 font-familyは、フォント名を指定するプロパティです。カンマ( , )で区切ることにより、フォント名を複数指定することができます。以下は、p 要素(段落としての文字列)にフォントファミリーを指定した例です。

p { font-family: "MS Pゴシック","ヒラギノ角ゴ Pro W3",sans-serif,serif,monospace,cursive,fantasy }

 フォントを複数指定すると、左から優先的に表示されます。左側指定のフォントが有効でないときは、順を追って、右側のフォントに指定されて行きます。また、MS 明朝のようにフォント名に半角スペースが入っている場合は、ダブルクオーテーションで"MS 明朝"のように囲む必要があります。

※MS Pゴシックは、全角英字(MS) + 半角スペース + 全角英字(P) + ゴシックとなります。フォント名は全角文字のケースもあるので注意しましょう。

 下の5つは、性質と(同系列の)種類を表すフォント名です。実際にどのフォントが表示されるのかはサイトを訪れるユーザーのOSとブラウザに依存されます。

serif(明朝系のフォント)
sans-serif(ゴシック系のフォント)
monospace(等幅フォント)
cursive(手書き風フォント)
fantasy(装飾付きフォント)

 指定したフォント名が有効でないとき、これらを最後に指定しておくと便利です。それではフォント名は複数指定するべきなのでしょうか?

1.font-familyプロパティを指定しない場合は、ユーザーのブラウザで標準設定されているフォントで表示されます。

2.フォントをひとつ指定した場合は、そのフォントがユーザーのパソコン環境で有効であれば、そのフォントで表示されます。有効でなければ、ブラウザ標準設定のフォントで表示されます。

【まとめ】

 1、2も含め、どのフォントが表示されるかは訪れるユーザーのOSとブラウザに依存します。筆者の場合は複数指定していますが、作者の好みに応じて、特定のフォント名を変えるなど、指定する順番を入れ替えてみると良いでしょう。

※"ヒラギノ角ゴ Pro W3"は筆者がマックユーザーを意識して加えてみましたが、実際にはOsakaのフォントのほうが実用的で多く使われています。

 パソコンにインストールされているフォントは、OSの種類により異なりますが、ホームページ製作者のパソコンにインストールされているフォントはCSSとは無関係です。インストールされていないものも指定し、相手のパソコンにその指定したフォントがあれば有効となります。もっと正確に言いますと、ホームページを公開しているサーバと訪れるユーザーのパソコンとの関係になります。

XHTML/CSS・目次 | フォント・目次

Copyright (C) 2004-2007 http://www.xml.vc/