ウェブランサー

font-family - フォントの種類を指定する

対応ブラウザ
IE7対応IE8対応Firefox対応Chrome対応Opera対応Safari対応
適用対象 全ての要素
継承 する

font-familyプロパティは、フォントの種類を指定する際に使用します。

スタイルシートでフォントを指定しても、ページを観覧する利用者の環境によっては表示できないフォントもあります。指定されたフォントが表示されなかった場合に、代用フォントとしてイメージに近いフォントが表示されるように、候補を指定しておくことが推奨されます。この場合、候補順に並べてカンマ(,)で区切って記述します。対応するフォントがユーザー環境に無い場合には、標準フォントで表示されます。

font-familyに与えられる値

font-size: フォント名;
「MS ゴシック」「MS 明朝」など、フォント名で直接指定します。フォント名にスペースが含まれている場合には、ダブルクォーテーション("〜")またはシングルクォーテーション( '〜' )で囲みます。
font-size: キーワード;
sans-serif (ゴシック系のフォント)、serif (明朝系のフォント)、cursive (筆記体、草書体のフォント)、fantasy (装飾的なフォント)、monospace (等幅フォント)

font-familyの使用サンプル

CSS
.font_sample01 {
 font-family: 'MS ゴシック', sans-serif;
}
.font_sample02 {
 font-family: 'MS 明朝', serif;
}
.font_sample03 {
 font-family: Impact,Charcoal;
}
XHTML
<div>
<span class="font_sample01">font_sample01 [font-family:'MS ゴシック', sans-serif;]</span><br />
<span class="font_sample02">font_sample02 [font-family:'MS 明朝', serif;]</span><br />
<span class="font_sample03">font_sample03 [font-family: Impact,Charcoal;]</span><br />
</div>
表示確認
font_sample01 [font-family:'MS ゴシック', sans-serif;]
font_sample02 [font-family:'MS 明朝', serif;]
font_sample03 [font-family: Impact,Charcoal;]

font-familyに関連するCSSプロパティ

フォント・文字色
color 文字の色を指定する
font 文字フォントに関する指定をまとめて行う
font-family 文字フォントファミリー(フォントの種類)を指定する
font-feature-settings OpenTypeフォント機能の利用について、有効/無効を指定する
font-kerning 欧文フォントにカーニングを適用する
font-language-override 表示する文字フォントの言語を部分的に変更する
font-size 文字フォントのサイズ(大きさ)を指定する
font-size-adjust 文字フォントの種類の違いによるサイズのバラつきを調整する
font-stretch 文字フォントの横幅の広さを指定する
font-style 文字フォントを斜体で表示する
font-synthesis 太字や斜体を持たないフォントファミリーの場合に、太字や斜体で表示するかどうかを指定する
font-variant 文字フォントの表示に関するサブプロパティの値をまとめて指定する
font-variant-alternates 文字フォントの代替グリフ(字形)の選定を制御する
font-variant-caps スモールキャップス(small caps)などの、文字フォントのグリフ(字形)を指定する
font-variant-east-asian 表示する文字フォントのグリフ(字形)の指定を行う
font-variant-ligatures 隣り合った文字フォントの合字(リガチャ)を指定する
font-variant-numeric 数字の表示形式を指定する
font-variant-position 上付き文字、下付き文字を指定する
font-weight 文字フォントの太さを指定する