font-family:フォントの種類を指定する
初期値 | ユーザーエージェントの既定値 |
適用対象 | 全ての要素、::first-letter および::first-line |
継承 | する |
アニメーション | 離散値 |
対応ブラウザ | caniuseで確認 |
font-familyプロパティの説明
font-family
は、ブラウザが表示するフォントの種類や総称ファミリー名の優先順位を指定します。複数の値をカンマ区切りで指定することで、先頭から順に利用可能であれば採用すべきフォントを示すことができます。
ここで指定されたフォントは、端末にインストール済み、あるいはダウンロード可能であれば、画面に表示される文字列に適用されます。利用可能なフォントがなかった場合のために、総称ファミリー名を必ず併記しておきましょう。
フォントの最適化は一文字ずつ行われます。要素のまとまりや段落単位で共通のフォントが使われるわけではありません。英文と日本語が混在している文章であれば、それぞれの文字に利用できるフォントを個別に適用します。数字や記号なども指定されたリストの中から利用可能なものを探します。他のプロパティで指定された文字の太さや装飾によって、フォントの選択に影響が出る場合もあります。
CSSによるフォントファミリーの指定は絶対的なものではありません。あくまで製作者側が意図している理想的な書体を提案するものです。ユーザー側でブラウザの既定値を優先していたり、ユーザーエージェントの設定が優先されるような環境では、ここで指定した値は保証されません。
フォント関連のプロパティを一括で指定する場合は、ショートハンド・プロパティのfont
を使用して下さい。
font-familyに指定できる値
- <family-name>
- フォントファミリーの名称です。そのフォントを呼び出すための名称を指定します。名称にスペースが含まれる場合は原則として引用符で囲むことを推奨します。
- <generic-name>
- 総称フォントの名称です。指定されたフォントがどれも利用できなかった場合に、ブラウザがOSに標準でインストールされているフォントの中から選択するためのヒントを与えます。これを指定しておくことで、製作者側の意図を最低限反映させることができます。基本的には値の末尾に記載します。
総称フォントファミリーの一覧
CSSのfont-family
で指定できる総称フォントファミリーの一覧です。要素にフォントを指定する祭は、値の末尾にこの中のいずれかを記載しておきましょう。
名称 | 説明 |
---|---|
serif | セリフ体を表す総称ファミリー名です。文字の先端に飾りがついたフォントを表示します。セリフを持つ書体のことをローマン体と呼びます。 |
sersans-serifif | サンセリフ体を表す総称ファミリー名です。文字の先端に飾りがつかないフォントを表示します。日本ではゴシック体とも呼ばれますが、欧文ではブラックレターのことを指すため正確ではありません。 |
monospace | 全ての文字が同じ幅を持つ等幅書体を表す総称ファミリー名です。モノスペースとはグリフ幅が固定されているという意味です。 |
cursive | 筆記体を表す総称ファミリー名です。筆記体は毛筆やペンで書かれた手書き風の文字を表します。多くの場合、斜体になっていたり文字同士がつながって見えます。 |
fantasy | 個性的な装飾を持つ書体の総称ファミリー名です。遊び心に溢れた書体や独特の雰囲気を持つ文字を表示します。 |
system-ui | システムで既定となっているユーザーインターフェイスを表す総称ファミリー名です。書体やグリフをユーザーインターフェイスに合わせて取ります。 |
ui-serif | ユーザーインターフェイスのセリフ体を表す総称ファミリー名です。書体やグリフをユーザーインターフェイスに合わせてセリフ体で表示します。 |
ui-sans-serif | ユーザーインターフェイスのサンセリフ体を表す総称ファミリー名です。書体やグリフをユーザーインターフェイスに合わせてサンセリフ体で表示します。 |
ui-monospace | ユーザーインターフェイスの等幅を表す総称ファミリー名です。書体やグリフをユーザーインターフェイスに合わせて等幅フォントで表示します。 |
ui-rounded | ユーザーインターフェイスの丸字体を表す総称ファミリー名です。書体やグリフをユーザーインターフェイスに合わせて丸字体で表示します。 |
math | 数式などで使われる独自の書体を持つ総称ファミリー名です。上付き文字や下付き文字、複数の行をまたぐ括弧、入れ子の数式、明確な意味を持った二重のグリフなどがあります。 |
emoji | 絵文字を表示するために特別な文字セットを持つ総称ファミリー名です。 |
fangsong | 中国語の文字を表す特別な総称ファミリー名です。セリフ体風の Song と手書き風の Kai を合わせたような表現を持ちます。 |
font-familyの使い方とサンプル
font-family
プロパティの構文は以下の通りです。
/* サンセリフ体の指定 */
font-family: "Hiragino Kaku Gothic ProN", "MS PGothic", sans-serif;
font-family: "ヒラギノ角ゴ ProN", "MS Pゴシック", sans-serif;
/* セリフ体の指定 */
font-family: "Times New Roman", serif;
font-family: "HiraMinProN-W3", "MS PMincho", serif;
font-family: "ヒラギノ明朝 ProN W3", "MS P明朝", serif;
/* 総称ファミリー名 */
font-family: serif;
font-family: sans-serif;
font-family: monospace;
font-family: cursive;
font-family: fantasy;
font-family: system-ui;
font-family: ui-serif;
font-family: ui-sans-serif;
font-family: ui-monospace;
font-family: ui-rounded;
font-family: emoji;
font-family: math;
font-family: fangsong;
/* グローバル値 */
font-family: inherit;
font-family: initial;
font-family: revert;
font-family: unset;
font-familyの実例
それでは実際にfont-family
プロパティの書き方を見ていきましょう。以下の例は、個別の総称ファミリー名を与えた要素の比較を表しています。
.samp_box {
overflow: auto;
width: 100%;
padding: 0 1rem 1rem;
background: #eee;
}
.samp_box p {
margin: 1rem 0 0;
padding: .3rem;
background: #fff;
}
#ff_serif {
font-family: serif;
}
#ff_sans {
font-family: sans-serif;
}
#ff_mono {
font-family: monospace;
}
#ff_cur {
font-family: cursive;
}
#ff_fan {
font-family: fantasy;
}
<section class="samp_box">
<p id="ff_serif">font-family: serif; ABCDEFG. 0123456789. あいうえおカキクケコ。</p>
<p id="ff_sans">font-family: sans-serif; ABCDEFG. 0123456789. あいうえおカキクケコ。</p>
<p id="ff_mono">font-family: monospace; ABCDEFG. 0123456789. あいうえおカキクケコ。</p>
<p id="ff_cur">font-family: cursive; ABCDEFG. 0123456789. あいうえおカキクケコ。</p>
<p id="ff_fan">font-family: fantasy; ABCDEFG. 0123456789. あいうえおカキクケコ。</p>
</section>
具体的なフォントファミリーの指定
フォントファミリーの指定にこだわるのであれば、まずは大手企業の公式サイトや利用者が多いウェブサービスのCSSを確認しましょう。不特定多数のユーザーが利用するサイトでは、多様な環境で表示されることを想定した内容となっています。まずは、共通している記述内容を押さえて自身が手掛けるサイトの特性に合ったトレンドを取り入れていくと上手くいきます。
/* ================== */
/* 以下の内容は参考例です */
/* ================== */
body { /* シンプル */
font-family:
Hiragino Kaku Gothic Pro,
MS PGothic,
sans-serif;
}
body { /* 日本語指定 */
font-family:
"ヒラギノ角ゴ Pro",
"MS Pゴシック",
sans-serif;
}
body { /* 大手ポータルサイト */
font-family:
ヒラギノ角ゴ Pro, Hiragino Kaku Gothic Pro,
メイリオ, Meiryo,
Osaka,
MS Pゴシック, MS PGothic,
sans-serif;
}
body { /* グローバル企業 */
font-family:
"SF Pro JP", "SF Pro Text", "SF Pro Icons",
"Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3",
メイリオ, Meiryo,
"MS Pゴシック",
"Helvetica Neue", Helvetica,
Arial,
sans-serif;
}
body { /* 大手動画サイト */
font-family:
Avenir,
Lato,
-apple-system,
BlinkMacSystemFont,
Helvetica Neue,
Hiragino Kaku Gothic ProN,
Meiryo,メイリオ,
sans-serif;
}
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 | 文字列に適用されるキャピタライゼーションルールを制御する |
font-variant-east-asian | 東アジアの言語で使われる字体を制御する |
font-variant-ligatures | 隣り合った文字フォントの合字(リガチャ)を制御する |
font-variant-numeric | 数値に関する文字表記を制御する |
font-variant-position | 上付き文字や下付き文字として配置されるべき字体の使用を制御する |
font-weight | 文字フォントの太さを指定する |