字体／フォント

Since: 23rd/May/2002; Last Modified: 25th/May/2002

フォントの種類 - font-family

フォントの種類を次のように指定します：

• h1 要素のフォントの種類を手書き風フォント (cursive)
• p 要素のフォントの種類を明朝フォント (serif)
• address 要素のフォントの種類を等幅フォント (monospace)

body { background: url("./rindou5.gif") navy;
    color: #ccf }
h1 { font-style: italic;
    font-weight: normal;
    font-size: 3em;
    font-family: cursive }
p { background : #ccf;
    color: navy;
    font-weight: bold;
    line-height: 1.5;
    font-family: serif }
address { font-style: normal;
    font-variant: small-caps;
    font-weight: bold;
    font-size: 0.9em;
    line-height: 1;
    font-family: monospace }

ango.css を上のように編集／保存して、 yonagahime.html をブラウザで開くと各要素のフォントが指定されたものになっていることが確認できます。

フォントの種類は、具体的なフォント名と、キーワードで指定できます。

フォントの種類を示すキーワードは <generic-family> と呼ばれて、次の５つが定義されています。

ここに挙げた <generic-family> に属するのは CSS で定義されたキーワードであり、ブラウザは適当なフォントに当てはめます。たとえば、 monospace が指定されたときに、実際に使うフォントが 'Courier New' になるのか、 'Lucida Console' になるのかは分かりません。

個別のフォント名を具体的に明記する事もできます。その場合は、利用者のコンピュータにそのフォントが用意されていないと、ブラウザの標準のフォントが使われます。 Windows の場合は、そのマシンで使えるフォントが Fonts ディレクトリに格納されています。このディレクトリの場所は「スタート」メニューの「検索(C)」、「ファイルやフォルダ(F)」から探してください。

次の例は h1 要素のフォントを４つ、 generic-family を１つ指定しています。先頭から順番に探されて、見つかったフォントで表示されます。４つとも見つからなかった場合は、ブラウザが serif に対応させているフォントが使われます。

h1 { font-family: 'Book Antique', 'Garamond', 'Georgia', 'ＭＳ Ｐ明朝', serif }