Since: 23rd/May/2002; Last Modified: 24th/Dec./2006
font-familyフォントの種類を次のように指定します：
cursive)serif)monospace)
@charset "utf-8";
* { font-style: normal;
font-weight: normal;
font-family: 'Meiryo', sans-serif }
html { background: url(./rindou5.gif) navy;
color: #ccf }
h1 { font-style: italic;
font-size: 3em;
font-family: cursive }
div.section { background : #ccf;
color: navy }
p { line-height: 1.5;
font-family: serif }
p:first-child { font-weight: bold }
p:first-child:first-letter { color: red;
font-size: 2em }
address { font-style: normal;
font-variant: small-caps;
font-weight: bold;
font-size: 0.9em;
line-height: 1;
font-family: 'Andale Mono Bold','Osaka等幅','Consolas',monospace }
common.css を上のように編集／保存して、 genji01_kiritsubo.html をブラウザで開くと各要素のフォントが指定されたものになっていることが確認できます。
フォントの種類は、具体的なフォント名と、キーワードで指定できます。
フォントの種類を示すキーワードは <generic-family> と呼ばれて、次の５つが定義されています。
serif | serif: ひげ付文字。明朝フォント |
sans-serif | sans-serif: ひげなし文字。ゴシックフォント |
cursive | cursive: 手書き文字風フォント |
fantasy | fantasy: 装飾主体の文字 |
monospace | monospace: 等幅フォント。 |
ここに挙げた <generic-family> に属するのは CSS で定義されたキーワードであり、ブラウザは適当なフォントに当てはめます。たとえば、 monospace が指定されたときに、実際に使うフォントが 'Courier New' になるのか、 'Lucida Console' になるのかは分かりません。
個別のフォント名を具体的に明記する事もできます。その場合は、利用者のコンピュータにそのフォントが用意されていないと、ブラウザの標準のフォントが使われます。 Windows の場合は、そのマシンで使えるフォントが Fonts ディレクトリに格納されています。このディレクトリの場所は「スタート」メニューの「検索(C)」、「ファイルやフォルダ(F)」から探してください。
| 値 | 例 |
|---|---|
| monospace | The quick brown fox jump ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789あいうえおアイウエオ 八月のある日、男が一人、行方不明になった。 |
| 'Courier New' | The quick brown fox jump ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789あいうえおアイウエオ 八月のある日、男が一人、行方不明になった。 |
| 'Lucida Console' | The quick brown fox jump ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789あいうえおアイウエオ 八月のある日、男が一人、行方不明になった。 |
| 'Consolas' | The quick brown fox jump ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789あいうえおアイウエオ 八月のある日、男が一人、行方不明になった。 |
| 'Andale Mono' | The quick brown fox jump ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789あいうえおアイウエオ 八月のある日、男が一人、行方不明になった。 |
| 'Bitstream Vera Sans Mono' | The quick brown fox jump ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789あいうえおアイウエオ 八月のある日、男が一人、行方不明になった。 |
| 'Monaco' | The quick brown fox jump ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789あいうえおアイウエオ 八月のある日、男が一人、行方不明になった。 |
| 'Terminal' | The quick brown fox jump ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789あいうえおアイウエオ 八月のある日、男が一人、行方不明になった。 |
次の例は h1 要素のフォントを４つ、 generic-family を１つ指定しています。先頭から順番に探されて、見つかったフォントで表示されます。４つとも見つからなかった場合は、ブラウザが serif に対応させているフォントが使われます。
h1 { font-family: 'Book Antique', 'Garamond', 'Georgia', 'ＭＳ Ｐ明朝', serif }