総称フォントの使い方
""を使わずにフォントの種類を指定することができます。
ユーザーが使っているデバイスや環境によって指定したフォントを使えない場合の保険として見た目をある程度制御することができます。今回は以下の5種類の汎用的なフォントを紹介します
- Serif（セリフ体）
文字の端に小さな装飾がついているもの。紙の書籍や新聞によく使われるフォント - Sans-serif（サンセリフ体）
装飾(セリフ)がなくシンプルなフォント。現代的で視認性が高いフォント - Monospace（等幅フォント）
すべての文字が同じ幅で表示されるフォント。 - Cursive（筆記体）
柔らかく個性を表現することに向いている流れるようなフォント - Fantasy（ファンタジーフォント）
デコレーションが多い独特なフォント。
index.html
<!DOCTYPE html>
<html lang ="ja">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href = "style.css">
</head>
<body>
<p class ="font_1">総称フォント検証用のテキストです。明朝系</p>
<p class ="font_2">総称フォント検証用のテキストです。ゴシック系</p>
<p class ="font_3">総称フォント検証用のテキストです。筆記体</p>
<p class ="font_4">総称フォント検証用のテキストです。装飾系</p>
<p class ="font_5">総称フォント検証用のテキストです。等幅</p>
</body>
</html>
style.css
.font_1{
font-family: serif;
}
.font_2{
font-family: sans-serif;
}
.font_3{
font-family: cursive;
}
.font_4{
font-family: fantasy;
}
.font_5{
font-family: monospace;
}