CSSは、フォントスタイルの調整にも多くのプロパティを提供しています。これらは、フォントファミリー、フォントスタイル、影効果などを指定できます。
CSSフォントプロパティには、フォントファミリー、フォントスタイル、フォントウェイトなどが含まれます。これらのプロパティは、主にテキストが含まれるHTML要素（p, i、など）に適用されます。同様に、これらは表でも使用できます。font-familyを使用すると、使用するフォントファミリーを指定できます。
<!DOCTYPE html>
<html lang="de">
<head>
<title>PSD-Tutorials.de</title>
<meta charset="UTF-8" />
<style>
p {font-family:verdana, sans-serif;}
h1 { font-family:"Courier New", Courier, monospace; }
</style>
</head>
<body>
<div>
<h1>PSD-Tutorials.de</h1>
<p>Das ist ein Absatz mit einem <strong>fetten Wort</strong>.</p>
<h2>Das ist eine Überschrift mit einem <strong>fetten Wort</strong>.</h2>
</div>
</body>
</html>結果はブラウザで次のように表示されます：
代表的なフォントファミリーは、たとえばArial, Helvetica、およびTimes Romanです。CSSプロパティfont-familyにより、選択したフォントを指定できます。複数のフォントを指定する場合、順序が重要です。最初に指定したフォントが利用可能であれば、そのフォントが使用されます。複数のフォントは、カンマで区切って列挙します。通常、ジェネリック フォント ファミリーを最後に指定します。ジェネリック フォント ファミリーを指定することで、ブラウザには、指定されたフォントと類似したフォントを選択する機会が与えられます。
• serif = セリフ体のフォント
• sans-serif = サンセリフ体のフォント
• cursive = カーシブ体のフォント
• fantasy = ファンタジー体のフォント
• monospace = 等幅文字のフォントです。
フォントスタイル
プロパティfont-styleを使用すると、フォントのスタイルを指定できます。選択したフォントファミリーが許可している場合、italic値を使用してイタリック体に設定できます。
他のフォントファミリーはobliqueを使用して斜体にすることもできます。
次に、フォントのマイナースタイルをコントロールするfont-variantプロパティがあります。これにより、スモールキャップを定義できます。
これにはfont-variantにsmall-capsを割り当てます。
フォントサイズ
フォントサイズの指定も非常に重要です。CSSではfont-sizeプロパティが利用できます。異なる単位でフォントサイズを指定できます。
• EM
• REM
• Pixel
• パーセント
• キーワード
以下のキーワードが利用可能です：
• xx-small – 非常に小さい
• x-small – 小さい
• small – 小
• smaller – 親要素より小さい
• medium – 中
• large – 大
• x-large – 大きい
• xx-large – 非常に大きい
• larger – 親要素より大きい
フォントサイズの指定方法の例を示します：
.eins {font-size: 10px;}
.zwei {font-size: 20px;}
.drei {font-size: 110%;}
.vier {font-size: xx-large;}ブラウザでの表示は以下のようになります：
フォントサイズの定義には複雑な側面があるため、異なる単位の利点と欠点を考慮する必要があります。
いつどの単位を使用すべきかについての良い概要は、こちらで見つけることができます。全文を読みたくない方への簡単なアドバイス：スクリーン表示にはemなどの相対値を使用し、印刷レイアウトにはptなどの絶対単位を使用してください。
フォントウェイト
フォントの太さや強弱を決定するフォントウェイトを次に説明します。これにはfont-weightプロパティが使用されます。
.fett {
font-weight:bold;
}
この構文により、太字で指定されたテキストが表示されます。
可能な値には、bold（太字）、bolder（特に太い）、lighter（細い）、normalなどがあります。さらに、100, 200, 300, 400, 500, 600, 700, 800および900の数値も許容されています。これらは、特に細い（100）から特に濃い（900）まで幅広く対応しています。
定義を要約する
フォントの定義に関連する文脈で、line-heightという属性も重要であり、これによって行の高さが定義されます。この属性について詳しく説明することは後で行います。この段階では、後述のfont属性と関連があるので、簡単に触れておきます。
これまでに紹介したフォント表示に関する情報は組み合わせることができます。そのために一般的なfont属性が使用されます。これには以下の個々の情報が含まれています。
• font-style
• font-variant
• font-weight
• font-size
• line-height
• font-familyfontを使用して、さまざまなフォントの書式を組み合わせることができます。前述の属性を指定することができますが、すべて使用する必要はありません。ただし、フォントサイズとフォントファミリーの属性は必須です。
省略記法のおかげで、CSSファイルを短く、見やすくできます。
ただし、次に示す順序を守る必要があります。 font-sizeとline-heightの2つの属性が記載される場合、これらはスラッシュで区切られます。ここで単一の値が指定される場合は、それがfont-sizeを表すということになります。
例:
p {
font: italic small-caps bold 1.3em/1.5em Georgia,Times,serif;
}font-size-adjustは、異なるフォントをほぼ同じ大きさで表示するために開発されました。 同じ高さのフォントでも、異なるx-高さを持つ場合があります。ただし、x-高さが大きいフォントの方が読みやすいです。そのため、元のフォントが存在せず、x-高さの小さい別のフォントに置き換えられた場合に文書が読みにくくなることがあります。 font-size-adjust は、この違いを調整できるようにするものです。
例:
h1 {
font-family: Verdana,
'Times New Roman', 'Courier New';
font-size-adjust: 0.61;
}
次のチュートリアルでは、ウェブサイトのフォントスタイルを調整するためのさらなる方法を学びます。
