font-family
CSSでは、フォントを変更することができます。
本ページでは、font-familyプロパティについて説明します。
font-familyプロパティとは
font-familyプロパティは、表示するフォントを変更します。
font-familyの定義は、以下のとおりです。
値 | family-name , generic-family |
---|---|
初期値 | ブラウザで決定 |
適用対象 | すべての要素 |
継承 | する |
family-nameとgeneric-familyは、カンマ(,)で区切って複数指定できます。複数指定した時は、左に記述したものほど優先されます。
値の説明
以下は、font-familyで使える値と説明です。
- family-name
- メイリオなどのフォントファミリ名です。半角スペースなどを含む名前の場合は、ダブルクォーテーション(")かシングルクォーテーション(')で囲む必要があります。
- generic-family
- 総称ファミリ名です。ゴシック体などを指定して、指定したフォントファミリが使えない時に、ゴシック体の中からブラウザで表示するフォントファミリを決めます。ダブルクォーテーション(")やシングルクォーテーション(')で囲んではいけません。
generic-familyで指定できるキーワードには、以下があります。
- serif
- 明朝体
- sans-serif
- ゴシック体
- cursive
- 筆記体
- fantasy
- 装飾的なフォント
- monospace
- 等幅フォント
利用例
利用例は、以下のとおりです。
【font-familyの利用例】
body { font-family: "Hiragino Kaku Gothic ProN","Hiragino Sans","Meiryo",sans-serif; }
bodyに記述することで、継承によってすべての要素に適用されます。
左から使えるフォントファミリが選択され、指定したフォントファミリがない場合でもゴシック体が使われるように、最後にsans-serifを指定しています。
英文フォントを先に指定して、英字と日本語で使えるフォントを変えることもできます。また、等幅フォントを使って表示箇所がズレないようにもできます。詳細は、「CSSによるフォントの変更」をご参照ください。
ブラウザのサポート状況
各ブラウザの最新バージョンでのサポート状況は、以下のとおりです。
項目 | IE | Ed | Fx | Ch | Sa | Op |
---|---|---|---|---|---|---|
font-family | 〇 | 〇 | 〇 | 〇 | 〇 | 〇 |
項目 | Sa | An | Op | Ch | Fx | Sm |
---|---|---|---|---|---|---|
font-family | 〇 | 〇 | 〇 | 〇 | 〇 | 〇 |
- 〇
- サポート
- △
- 制限あり
- ×
- 未サポート
- ?
- 不明
- IE
- Internet Explorer
- Ed
- Edge
- Fx
- Firefox
- Ch
- Chrome
- Sa
- Safari
- Op
- Opera
- An
- Android Browser
- Sm
- Samsung Internet
※スマートフォンのFirefoxとChromeは、Android版です。
「CSSプロパティ一覧」に戻る