【CSS】font-family について
問題
font-family ってヒラギノとか ＭＳ ゴシック みたいな、とっても特定のフォントを表す名前じゃなくて、なんと言うか、汎用的なフォント名ってないの？ゴシック体とか明朝体みたいなフォント名。
問題
仕様書のfont-familyの項（CSS2、CSS3）にあるように、スタイルシートの中で、font-familyは以下のように書きます。
'font-family': [[ <family-name> | <generic-family> ] [, <family-name>| <generic-family>]* ] | inherit ↓ font-family: フォント名, フォント名, フォント名, 総称名;
なにやら、font-name と generic-name というのが登場しますね。
総称名 generic-name には、仕様書に以下の5つが定義されています。
| 名称 | 概要 |
|---|---|
| serif | ひげつき文字。明朝体。 |
| sans-serif | ひげのない文字（はね、はらいがない）。ゴシック体。 |
| cursive | 筆記体。続け書き風フォントや手書き風フォント。 |
| fantasy | 装飾系フォント。絵文字も含む。 |
| monospace | 固定幅フォント。 |
何のために存在するのかというと、ヒラギノやメイリオなど作者が意図した具体的なフォントを先に挙げてもらって、いずれも使用不可能だったときのために利用される指定。
「ヒラギノかメイリオがあったらそっちがいいなあ。でもPCに入ってないときはしかたないや、適当なゴシック体にしておいて！」をCSSで書くと以下のようになる。
font-family: "Hiragino Kaku Gothic Pro", Meiryo, sans-serif;
こだわりなくブラウザにお任せする場合は、こんなのもありでしょう。
font-family: serif; /* 適当に明朝体で！ */
コメント