SOFTELメモ Developer's blog

会社概要 ブログ 調査依頼 採用情報 ...
技術者募集中

【CSS】font-family について

問題

font-family ってヒラギノとか MS ゴシック みたいな、とっても特定のフォントを表す名前じゃなくて、なんと言うか、汎用的なフォント名ってないの?ゴシック体とか明朝体みたいなフォント名。

問題

仕様書のfont-familyの項(CSS2CSS3)にあるように、スタイルシートの中で、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; /* 適当に明朝体で! */

関連するメモ

コメント