sans-serif、serif 以外にもあるCSSフォントファミリーのキーワード
- 2014-10-31
- スラスラわかるCSSデザインのきほん
- css
CSSでフォントを指定するにはfont-familyプロパティを使用します。カンマで区切って複数のフォントを指定しておくと、1つ目から順に探して最初に見つかったフォントで表示されます。どれも見つからなかったときの保険として、必ず最後に一般的なフォントファミリーを指すキーワードを入れておきます。書籍『スラスラわかるCSSデザインのきほん』ではsans-serif、serifの2種類を紹介していますが、実はそれ以外にも3種類あります。
関連：『スラスラわかるCSSデザインのきほん』P.68、85
5種類の一般フォントファミリーキーワード
特定のフォントではなく一般的なフォントの種類を指すキーワード（一般フォントファミリーと言われています）は、sans-serif、serif、cursive、fantasy、monospaceの5種類があります。
sans-serif
欧文フォントでは「サンセリフ」を指すキーワードです。日本語では「ゴシック体」が該当します。
font-family: sans-serif;
ブラウザでの表示：Lorem ipsum ぐるりと回って猫の目。
serif
欧文フォントでは「セリフ」を指すキーワードです。日本語では「明朝体」が該当します。
font-family: serif;
ブラウザでの表示：Lorem ipsum ぐるりと回って猫の目。
cursive
手書き文字を指すキーワードです。欧文書体はOS、ブラウザによって表示するフォントが大きく異なります。また、日本語はこれに対応するフォントがなく、明朝体などで表示されます。使ってもあまり意味がないためほとんど使われません。
font-family: cursive;
ブラウザでの表示：Lorem ipsum ぐるりと回って猫の目。
fantasy
装飾書体を表すキーワードです。cursive同様、欧文書体はOS、ブラウザによって表示するフォントが大きく異なります。また、日本語はこれに対応するフォントがなく、ゴシック体などで表示されます。使ってもあまり意味がないためほとんど使われません。
font-family: fantasy;
ブラウザでの表示：Lorem ipsum ぐるりと回って猫の目。
monospace
san-serif、seif以外で唯一よく使われるのがmonospaceです。等幅フォントを指します。等幅フォントとは1文字1文字の横幅が同じに作られた書体です。プログラムのソースコードを表示するときなどによく使われます。
font-family: monospace;
ブラウザでの表示：Lorem ipsum ぐるりと回って猫の目。
ちなみに、次のページに異なるOS／ブラウザで表示されるフォントの違いが詳しく載っています（サイトのタイトルがちょっと… ですがよく調べられています）。──フォントカタログ5・ブラウザのデフォルトフォント http://rinrin.saiin.net/~aor/fonts/defaultfonts──
お使いのOS、ブラウザでどう見えるかは以下のようなHTMLファイルを作れば簡単にチェックできます。
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>一般フォントファミリーキーワード</title>
<style>
#sans-serif { font-family: sans-serif; }
#serif { font-family: serif; }
#cursive { font-family: cursive; }
#fantasy { font-family: fantasy; }
#monospace { font-family: monospace; }
</style>
</head>
<body>
<p id="sans-serif">sans-serif ゴシック体</p>
<p id="serif">serif 明朝体</p>
<p id="cursive">cursive 手描き風書体</p>
<p id="fantasy">fantasy 装飾書体</p>
<p id="monospace">monospace 等幅書体</p>
</body>
</html>
こんな記事も
-
Bootstrap 5のスターターテンプレートの使い方
2021-02-26
-
CSSで変数を使う var()
2019-12-17
-
text-decorationに関連する新プロパティ
2019-10-24
-
リンクに伸びる下線をつけるには
2017-06-01
-
書籍内で紹介しているURLの一覧
2017-01-28
