色々なOSで見えるように、複数の font-family を指定します

こんにちは。Webアプリケーション開発などを行っています、すぐ使える株式会社 の井上と申します。

Webサイトが表示される時はそれぞれの訪問者の方のOSにあるフォントを使って文字が表示されますので、制作の時はfont-family にいくつかのフォントの候補を列挙しておくとよいですよ。

「最適」な設定はOSの進化に伴い変わるのですが（例えば、昔は Mac では Osaka が基本でしたが、今はヒラノギ系のものが入っていますね）、例えば現在このサイトだと、下記のように設定されています。

font-family: verdana,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Osaka,"ＭＳ Ｐゴシック","MS PGothic",Sans-Serif;

ブラウザはこの順番に使えるフォントが無いかを探し、もし何も無ければ、最後に指定されている「Sans-Serif」を採用します。「Sans-Serif」は「ゴシック体のフォント」という意味で、OSにインストールされているフォントの中でゴシック体のものを何か選んで表示してくれます。

ちなみに、明朝体にしたい場合はここは「Serif」です。

フォント指定の時の注意点は、以下の２点です。

- スペースを含むフォント名の時は「"」でくくる。（全角スペースについても同様。）
- ブラウザによって日本語フォントでも英文名称しか受け付けない場合があるので、両方を列挙する。

フォントの名称を何と指定すればよいのかはそれぞれのテスト環境でも無いと分かりにくいですが、「font-family の設定例」などで検索すれば、色々な例が出てきますので探してみて下さい。