font-family: ***;
| ブラウザ |
|
|---|---|
| プロパティ |
font-family は、フォントを指定するプロパティです。
p {
font-family: "ＭＳ Ｐゴシック",sans-serif;
}
| プロパティ名 | 値 | 説明 |
|---|---|---|
font-family |
以下を参照 | フォントファミリ名、または総称ファミリ名を指定 |
フォントを指定した場合の表示例を、次のリンク先で確認することができます。
フォントの指定方法
フォントの指定には、フォントファミリ名で指定する方法と総称ファミリ名で指定する方法があります。
フォントファミリ名で指定
フォントの具体的な名前で指定する方法です。
フォントファミリ名にスペースが含まれる場合は、その名前を引用符で囲む必要があります。
"ＭＳ Ｐゴシック"
総称ファミリ名で指定
ゴシック体系や明朝体系など、フォントの大まかな種類で指定する方法です。
次の5種類の値を指定することができます。
sans-serif… ゴシック体系のフォントserif… 明朝体系のフォントcursive… 筆記体系のフォントfantasy… 装飾系のフォントmonospace… 等幅系のフォント
- 日本語のテキストに
cursiveを指定すると、一部の環境ではそのテキストが正常に表示されなくなってしまうようです。
候補の設定
指定したフォントで表示できない場合に備え、複数の候補を設定しておくことができます。
font-family: 候補1,候補2,候補3;
上記のように、カンマ（ , ）で区切って複数の候補を記述していきます。この場合、候補1が利用できなければ候補2を利用する、といった流れになります。
具体的な指定例は次のようになります。（最後の候補には総称ファミリ名を指定しておくようにしましょう）
font-family: "ＭＳ Ｐ明朝","ＭＳ 明朝",serif;
使用例
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>文書のタイトル</title>
<style type="text/css">
p {
font-size: 200%;
font-weight: bold;
}
p.example1 { font-family: "ＭＳ Ｐ明朝","ＭＳ 明朝",serif; }
p.example2 { font-family: "ＭＳ Ｐゴシック","ＭＳ ゴシック",sans-serif; }
</style>
</head>
<body>
<p class="example1">明朝体のフォント</p>
<p class="example2">ゴシック体のフォント</p>
</body>
</html>
- 表示例
-
明朝体のフォント
ゴシック体のフォント