"CSS Tips Factory" : Presented by Nishishi via WordPress.

表示フォントの指定方法 [テキスト]

スタイルシートでは、文字列の表示に使うフォントを指定することができます。日本語用のフォントだとアルファベットの表示があまり美しくないことがあるため、英文を表示する箇所だけ欧文フォントを指定したいと思うことがよくあります。そんな場合には、スタイルシートで表示フォントを指定すると良いでしょう。
フォントを指定するのは簡単で、以下のようなソース(スタイルシート)になります。

h1 {
   font-family: Verdana,Arial,sans-serif;
}

上記の場合は、見出し(h1要素)に対して、font-familyプロパティの値に、「Verdana」・「Arial」の2種類の欧文フォントと、「sans-serif」という種類名を指定しています。(合計3つ)
Verdanaフォントが存在する環境ではVerdanaで表示されます。ない場合は、2番目に指定したArialフォントが(あれば)使われます。それもない場合は、最後の「sans-serif」の種類名が解釈され、閲覧者の環境に存在する「何らかのゴシック系フォント」で表示されます。

このように、font-familyプロパティには、複数のフォント名を優先順にいくつでも列挙しておけます。
どんなフォントがインストールされているかは閲覧環境によって異なるため、フォント指定の最後には、必ず「sans-serif」のような「フォントの種類を示すキーワード」を書いておきましょう。

フォントの種類を示すキーワード

フォントの種類を示すキーワードには、次の5つがあります。

  • sans-serif : ゴシック系フォント
  • serif : 明朝系フォント
  • cursive : 筆記体・草書体フォント
  • fantasy : 装飾系フォント
  • monospace : 等幅フォント

これらのキーワードだけを指定しても構いません。具体的にどんなフォントが表示に使われるかは、環境によって異なるため予想はできませんが、「ゴシック系で表示したい」などの大まかな希望通りにはなります。
※「fantasy」を指定すると、場合によっては文字ではないフォント(記号用とか音符用とかなんか特殊なもの)が使われちゃう可能性もあるので、それは避けておいた方が良いでしょう。

フォント名に空白文字が含まれる場合の記述

日本語フォントの場合、フォント名に空白文字が含まれるものがたくさんあります。例えば、「MS Pゴシック」とか。「MS」と「P」の間に半角スペースが1つあります。こういうフォント名を指定する場合は、フォント名全体を引用符で囲まなければなりません。例えば、以下のような感じで。

h2 {
   font-family: "MS Pゴシック", Osaka, sans-serif;
}

引用符は、ダブルクォーテーションでもシングルクォーテーションでも構いません。(style属性の中にスタイルを記述する場合は、style属性の値全体を囲むのにダブルクォーテーションを使っているはずなので、フォント名を囲む引用符はシングルクォーテーションしか使えません。)

欧文フォントでも、「Century Gothic」のようにスペースが含まれる名称のものがありますから、その場合も “Century Gothic” のように引用符で囲む必要があります。

なお、スペースを含まない名称であっても引用符で囲んで構いませんが、「sans-serif」や「monospace」のようなキーワードは、「フォントの名称」ではないため引用符で囲んではいけません。(※ややこしいと思うなら、「スペースを含まないなら引用符は不要」…と覚えておいても良いでしょう。)

フォント名に含まれるアルファベットの全角・半角に注意

日本語フォントの場合は、フォント名に含まれるアルファベットの扱いにも注意が必要です。「MS Pゴシック」の場合、「MS」や「P」は「全角英字」です。半角英字で記述すると正しく解釈されません。

この辺はややこしいので、Microsoft Wordやワードパッドなどのワープロソフトを起動し、フォント名の選択欄からフォント名をコピーして、スタイルシートソースにペーストするような方法で記述することをお勧めします。

全体にフォントを指定するのはあまり好ましくない

何もフォントを指定しなかった場合に、どのようなフォントが使われるかは環境(OSやブラウザ)によって異なります。望みのフォントで表示させようとして、body要素などにフォントを指定したいと思うこともあるかもしれませんが、あまり望ましくありません。
例えば、Windows Vistaには、「メイリオ」という(従来のフォントよりも)美しく見えるフォントが用意されています。しかし、「MS Pゴシック」フォントが第1に使用されるようスタイルが記述されていると、せっかくインストールされている「メイリオ」フォントは使われないことになってしまいます。

フォントの指定は必要な箇所のみに使うようにして、body要素などのような「全体」にいきなり指定するのは避けておく方が良いかも知れません。
ゴシック系や明朝系・等幅フォントなどを指定したい場合は、「sans-serif」や「serif」・「monospace」などのキーワードだけを指定すると良いでしょう。

フォントの表示サンプル

最後に、表示サンプルを掲載しておきます。最初の5つは種類名のみを指定したものですから、どのようなフォントが使われるかは、閲覧環境によって異なります。

  • ここは、sans-serifを指定しています。
  • ここは、serifを指定しています。
  • ここは、cursiveを指定しています。
  • ここは、fantasyを指定しています。
  • ここは、monospaceを指定しています。
  • ここには、”Century Gothic”,Verdana,Arial,sans-serifと指定しています。
  • ここには、HGP創英角ポップ体,メイリオ,’MS Pゴシック’,Osaka,sans-serifと指定しています。
  • ここには、”MS P明朝”,serifと指定しています。

こんな感じで、フォントをいろいろ指定可能です。

このCSS TIPSへのコメントはお気軽に! [コメントはまだありません。]

著者紹介

主要なカテゴリ

このCSS TIPSへのコメント・トラックバック

コメントはまだありません。

コメント投稿欄 このCSS TIPSに対するコメント投稿を歓迎します。

(必須)

(必須) ※公開されません

※公開(リンク)されます

コメント:

※投稿内容によってはフィルタによって保留扱いとなる場合があります。その場合は承認後に掲載されます。
※本文中にURLっぽい文字列を記述すると、投稿内容はスパム扱いとなって無視されてしまう場合がありますので書かないようご注意下さい。

トラックバック

このCSS TIPSへのトラックバックURLは以下の通りです。

※言及リンクがないトラックバックは拒否されますのでご注意下さい。また、文字コードはUTF-8でお送りいただける方が望ましいです。