フォントを定義する通常の方法はおおよそ次のようになります：
body {
font-family: Arial, Helvetica, sans-serif;
}ここではbody要素にフォントArialが割り当てられます。視聴者のシステムでそのフォントが利用できない場合、Helveticaにフォールバックします。さらにHelveticaも利用できない場合、ブラウザに対してセリフのないフォントを少なくとも1つ使用するよう指示されます。それを本当に制御することはできません。要するに、最終的にはデザインしたものが文字のジャングルで消えてしまう可能性があります。この問題の解決方法については後で説明します。
しかし最初に古典的な方法に戻りましょう。以下に、ウェブサイトの基本的な外観が調整される典型的な定義が示されています。 bodyの定義を使用して、基本的なフォントの設定を最初に行うことができます。
body {
font-family: Georgia, Times, "Times New Roman", serif;
color: #000;
font-size: 1.1em;
line-height: 150%;
}
p {
font-size: 1.1em;
}
もちろん、ページの個々の要素を別々にスタイリングすることもできます。これには見出しやイタリック体などが含まれます。ただし、CSSの継承原則を再度考慮してください。
h1 {
font-size: 1.6em;
}ブラウザでの結果は次のようになるでしょう：
Webfontsを使用する
従来のフォント定義の問題は明らかです：最終的には、指定したフォントが閲覧者に利用可能であるとは限らないことを本当に確信できません。ブラウザは、指定したフォントを見つけられない場合、おそらく望んでいるフォントに似ているものを選択します。したがって、結果には実際には完全な制御ができません。ここで@font-faceが登場するポイントです。なぜなら、これを使うと明示的に使用するフォントを指定できるからです。これは基本的に画像と同じように機能します。つまり、フォントファイルへのパスを指定する必要があります。
最新のブラウザでは、@font-faceにはWOFF-Webfontsが使用されます。これらのフォントは、以前に使用されていたEOTやTTF形式のWebfontよりもかなり小さくなっています。
典型的な@font-faceの定義は次のようになります：
@font-face {
font-family: "Bitstream Vera Serif Bold";
src: url("http://developer.mozilla.org/@api/deki/files/2934/=VeraSeBd.ttf");
}font-familyに使用するフォント名を記述します。ここまでは特に構文上の特記事項はありません。 src:url()を使用してWebfontファイルが配置されているURLを指定します。視聴者のコンピューターにフォントが利用可能な可能性がある場合は、localも追加で指定する必要があります。これにはフォント名が割り当てられます。
@font-face {
font-family: "Bitstream Vera Serif Bold";
local: "Bitstream Vera Serif Bold";
src: url("http://developer.mozilla.org/@api/deki/files/2934/=VeraSeBd.ttf");
}@font-faceの定義の後、Webフォントは通常どおり使用できます。
h1 {
font-family: "Bitstream Vera Serif Bold";
font-size: 1.2em;
color: #3399FF;
}例えばWebfontsがここにあります
ここで問題となるのは、どこでそれらのWebfontファイルを入手すればいいかです。例えばGoogleは、そのようなWebfontを多数提供しています。そのページはhttp://www.google.com/fontsで利用可能です。
これらのフォントは上記のページから直接利用できます。
対応する呼び出しは以下のようになります：
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine">
font-familyに使用するWebfontを指定します。上記のGoogleページにはこれらの名前と呼び出しがあります。Webfontを組み込んだら、他のフォントと同様に適用できます。
body {
font-family: 'Tangerine', serif;
font-size: 1.2em;
}自分のサイトで複数のWebfontを使用したい場合、目的のWebfontの下にある「http://www.google.com/fonts」で「Add to Collection」をクリックします。全てのWebfontが自分のCollectionに含まれている場合、「Use」を下部にクリックします。そこで、直接的なタコメータが表示されます。
この図を見ることで、Webfontをページに組み込んだ際の読み込み時間に与える影響を確認できます。これらの影響は実際に計測可能であり、追加のWebfontごとに大きくなります。
複数のWebフォントを以前にコレクションに追加したものを簡単に使用する方法を以下の例で示します：
<link href="http://fonts.googleapis.com/css? family=Henny+Penny|Eagle+Lake|Amarante|Plaster|Courgette" rel="stylesheet" type="text/css">
各Webフォントは縦棒で区切り、順番に書かれます。選択したコレクションに合致する完全な呼び出しは、すでに言及したUse-ページに表示されます。
多くのWebフォントには、ラテン語やキリル文字などのサブセットがあります。これを明示的に含めるためには、望ましいサブセットをパラメータ値として指定します。
http://fonts.googleapis.com/css?family=Philosopher&subset=cyrillic
これらのサブセットを複数使用する場合、それぞれをコンマで区切って記述します。
http://fonts.googleapis.com/css?family=Philosopher&subset=latin,cyrillic
ただし、このWebフォントの使用にはまったく別の背景があり、一部で議論の的となっています。まず、ページの呼び出し時にGoogleサーバーへの接続が必要です。これを回避するには、Webフォントファイルをダウンロードして独自のサーバーにアップロードする必要があります。ただし、この方法で使用するWebフォントの使用条件には必ず注意してください。
サンプルサイトのフォント定義
以下に、現在のサンプルサイトで使用するフォント定義を示します：
body {
font-family: 'Crimson Text', Helvetica, sans-serif;
color: #444;
text-decoration: none;
line-height: 1.5em;
font-size: 1.2em;
}
p {
font-size: 1.1em;
}
h1 {
font-size: 1.6em;
color: #3399FF;
}
もちろん、追加の要素を取り込むこともできます。ただし、現時点ではこの構文だけで十分です。
