CSS font-family フォントを指定するサンプル

CSSのfont-familyプロパティで、フォントを指定するサンプルです。

目次

仕様 font-familyプロパティの仕様
サンプル font-familyのサンプル

font-familyプロパティの仕様

font-family : 値1 , 値2

font-familyプロパティは、文字のフォントを指定します。引数が2種類あります。

値1 : フォントファミリー名
値1 説明
メイリオなど 種類はたくさんあります。
  • 名称にスペースがある場合はダブルコーテーションまたはシングルコーテーションで囲みます。例:"MS Pゴシック"
  • 複数のフォントを指定できます。
  • 優先順位の高いものから順にカンマ区切りで記述します。ユーザーの環境に指定のフォントがあればそれが使用されます。
    例:font-family: "メイリオ",Meiryo,"MS PGothic","MS UI Gothic",Arial,sans-serif;
値2 : 総称フォントファミリー名
値2 説明
serif 明朝系に相当します。
sans-serif ゴシック系に相当します。
monospace 等幅のフォントです。
cursive 筆記体・草書体に相当します。
fantasy 装飾されたフォントです。
値を継承する
  • 総称フォントファミリー名は、フォントファミリー名が使用できない時に使用されるフォントです。
  • 最低1つは指定しておいたほうが良いです。
  • 複数のフォントを指定できます。優先順位の高いものから順にカンマ区切りで記述します。ユーザーの環境に指定のフォントがあればそれが使用されます。
  • 初期値はブラウザによります。
  • 以下はMDNのfont-familyプロパティのリンクです。
    https://developer.mozilla.org/ja/docs/Web/CSS/font-family

font-familyのサンプル

font-familyのサンプルです。

<style>
#p1{font-family:"メイリオ";} /* メイリオ */
#p2{font-family:serif;} /* 明朝系に相当 */
#p3{font-family:sans-serif;} /* ゴシック系に相当 */
#p4{font-family:monospace;} /* 等幅のフォント */
#p5{font-family:cursive;} /* 筆記体・草書体に相当 */
#p6{font-family:fantasy;} /* 装飾されたフォント */
p{font-size:24px;}
</style>
<p id="p1">1.あいうえお-メイリオ</p>
<p id="p2">2.かきくけこ-serif-明朝系</p>
<p id="p3">3.さしすせそ-sans-serif-ゴシック系</p>
<p id="p4">4.たちつてと-monospace-等幅</p>
<p id="p5">5.なにぬねの-cursive-筆記体・草書体</p>
<p id="p6">6.はひふへほ-fantasy-装飾</p>

1行目は、フォントファミリー名を指定しています。
2行目以降は、総称フォントファミリー名を指定しています。

以下は、実行結果です。

関連の記事

CSS color 文字の色を指定するサンプル
CSS text-align 文字を左寄せ/右寄せにするサンプル
CSS vertical-align 垂直の位置を指定するサンプル
CSS line-height 行の高さを指定するサンプル
CSS letter-spacing 文字の間隔を指定する
CSS word-spaceing 単語の間隔を指定する
CSS overflow-wrap 単語が表示域を超える時の改行
CSS overflow 表示幅超える/スクロール表示非表示
CSS text-decoration 文字に線を引くサンプル

△上に戻る