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

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

font-family プロパティ

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

コード

font-familyのサンプルのコードです。
3行目はフォントファミリー名のメイリオを使用しています。
それ以下の行は、それぞれ総称フォントファミリー名を使用しています。

<style>
#box1{
	font-family:"メイリオ",serif,sans-serif;
}
#box2{
	font-family:serif,sans-serif,monospace;
}
#box3{
	font-family:sans-serif,monospace;
}
#box4{
	font-family:monospace,cursive,fantasy;
}
#box5{
	font-family:cursive;
}
#box6{
	font-family:fantasy;
}
#box{font-size:24px;}
</style>
<body >
<div id="box">
<div id="box1">あいうえお-メイリオ</div>
<div id="box2">かきくけこ-serif-明朝系</div>
<div id="box3">さしすせそ-sans-serif-ゴシック系</div>
<div id="box4">たちつてと-monospace-等幅</div>
<div id="box5">なにぬねの-cursive-筆記体・草書体</div>
<div id="box6">はひふへほ-fantasy-装飾</div>
</div>
</body>

上記コードのサンプルです。

あいうえお-メイリオ
かきくけこ-serif-明朝系
さしすせそ-sans-serif-ゴシック系
たちつてと-monospace-等幅
なにぬねの-cursive-筆記体・草書体
はひふへほ-fantasy-装飾

関連の記事

CSS 文字の色を指定するサンプル(color)
CSS 文字を左寄せ/右寄せにするサンプル(text-align)
CSS 文字の垂直の位置を指定するサンプル(vertical-align)
CSS 行の高さを指定するサンプル(line-height)
CSS 文字の間隔を指定するサンプル(letter-spacing)
CSS 単語の間隔を指定するサンプル(word-spaceing)
CSS 単語が表示領域を超える場合の改行方法(overflow-wrap/word-wrap)
CSS 表示領域を超える場合の表示方法(overflow)
CSS 文字に線を引くサンプル(text-decoration)




△上に戻る