CSS: font-family フォントを指定する
WebページのフォントをCSSで指定するには、 font-family プロパティを使用します。
通常は複数の候補をカンマ区切りで指定し、その中からユーザーの環境で使用できるフォントで 表示されます。優先順位は先に記述したフォントが優先されます。
値は「フォントファミリー名」、又は「総称フォントファミリー名」を指定します。
フォントファミリー名
フォントファミリー名とは、フォントの具体的な名前(例: "MS ゴシック"、"メイリオ" 等)です。 フォントの名前は全角、半角、スペース等を正しく記述する必要があります。 "MS ゴシック"等の間にスペースが入る場合は、ダブルクォーテーション「"」、 又はシングルクォーテーション「'」で囲みます。
総称フォントファミリー名
フォントの種類の総称を総称フォントファミリー名といいます。 ユーザーの環境によってはフォントファミリー名で指定したフォントが利用できない場合があります。 そのばあいの最終選択肢として指定します。 総称フォントファミリー名は引用符(" 又は ')で囲みません。総称フォントファミリー名として使用できる値は次の通りです。
総称フォントファミリー名 | 説明 |
---|---|
serif | 明朝系フォント |
sans-serif | ゴシック系フォント |
cursive | 筆記体・草書体系フォント |
fantasy | 装飾フォント |
monospace | 等幅フォント |
font-family 使用例
body {
font-family: "MS ゴシック",serif;
}
p {
font-family: "メイリオ", arial, sans-serif;
}
font-family サンプル
複数のフォントを指定してみました。表示の違いは下の通りです。 前半がフォントファミリー名、後半が総称フォントファミリー名です。
このフォントは「メイリオ」です。
このフォントは「MS ゴシック」です。
このフォントは「MS 明朝」です。
このフォントは「arial」です。
このフォントは「serif」です。
このフォントは「sans-serif」です。
このフォントは「cursive」です。
このフォントは「fatasy」です。
このフォントは「monospace」です。