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

CSSのfont-familyのサンプルです。

サンプル	font-familyプロパティ
	文字のフォントを指定する

font-familyプロパティ

font-family : 値1 , 値2

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

値1 : フォントファミリー名
値1	説明
メイリオなど	種類は複数あります。

例：font-family: "メイリオ",Meiryo,"MS PGothic","MS UI Gothic",Arial,sans-serif;

複数のフォントをカンマ区切りで指定できます。
ブラウザは、左に書かれたフォントから見ていき、ユーザーの環境に指定のフォントがあればそれが使用されます。
→指定のフォントが自分の環境(例：Mac)になければ表示できません。
→環境によって入っているフォントの種類は違います。
英語フォントがある場合は先に書き、次に日本語フォントを書きます。
→英語の箇所は英語フォントで表示され、日本語の箇所は日本語フォントで表示されます。
フォントの名称にスペースがある場合はダブルコーテーションまたはシングルコーテーションで囲みます。例："ＭＳＰゴシック"

値2 : 総称フォントファミリー名
値2	説明
serif	明朝系に相当します。
sans-serif	ゴシック系に相当します。
monospace	等幅のフォントです。
cursive	筆記体・草書体に相当します。
fantasy	装飾されたフォントです。
値を継承する

総称フォントファミリー名は、フォントファミリー名が使用できない時に使用されるフォントです。
複数のフォントを指定できます。優先順位の高いものから順にカンマ区切りで記述します。ユーザーの環境に指定のフォントがあればそれが使用されます。
初期値はブラウザによります。
以下はMDNのfont-familyプロパティのリンクです。
https://developer.mozilla.org/ja/docs/Web/CSS/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 class="p1">1.あいうえお-メイリオ</p>
<p class="p2">2.かきくけこ-serif-明朝系</p>
<p class="p3">3.さしすせそ-sans-serif-ゴシック系</p>
<p class="p4">4.たちつてと-monospace-等幅</p>
<p class="p5">5.なにぬねの-cursive-筆記体・草書体</p>
<p class="p6">6.はひふへほ-fantasy-装飾</p>

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

以下は、実行結果です。