font-familyプロパティは、フォントファミリー名とフォントの種類を指定して文字のデザインを変更します。
| フォントの種類 | 簡易説明 |
|---|---|
| serif | 明朝系 (Times New Roman,MS P明朝など) |
| sans-serif | ゴシック系 (Helvetica,MS Pゴシックなど) |
| cursive | 草書体・筆記体系 (Caflisch Script,Adobe Poeticaなど) |
| fantasy | 装飾的なフォント (Critter,Cottonwoodなど) |
| monospace | 等幅フォント (MSゴシック,Osaka-等幅など) |
font-familyプロパティ
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>フォントファミリーについて</title>
<link rel="stylesheet" href="./main.css" />
</head>
<body>
<p class="family1">この文章はserifです。</p>
<p class="family2">この文章はsans-serifです。</p>
<p class="family3">この文章はcursiveです。</p>
<p class="family4">この文章はfantasyです。</p>
<p class="family5">この文章はmonospaceです。</p>
</body>
</html>.family1 {font-family: serif;}
.family2 {font-family: sans-serif;}
.family3 {font-family: cursive;}
.family4 {font-family: fantasy;}
.family5 {font-family: monospace;}出力結果
この文章はserifです
この文章はsans-serifです。
この文章はcursiveです。
この文章はfantasyです。
この文章はmonospaceです。
環境によってフォントの日本語を認識せず、英語のみ有効になる場合があります。