色々なOSで見えるように、複数の font-family を指定します - 専門家回答 - 専門家プロファイル

専門家の皆様へ 専門家プロファイルでは、さまざまなジャンルの専門家を募集しています。
出展をご検討の方はお気軽にご請求ください。
井上 みやび子

井上 みやび子
Webエンジニア

- good

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

2013/04/10 10:27
(
5.0
)

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

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

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

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

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

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

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

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

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

ブラウザ
制作
文字

評価・お礼

tcn さん

2013/04/10 10:33

早々のご回答ありがとうございます。ずっとつかえていた部分だったので、勉強になりました。ありがとうございました。

(現在のポイント:-pt このQ&Aは、役に立った!

この回答の相談

CSSでの文字指定について

法人・ビジネス ホームページ・Web制作 2013/04/10 09:24

お世話になります。独学でホームページを制作しています。いつも頭を悩ませている事柄があり、質問させて頂きます。

ホームページで表示させるfont-familyについてなのですが、ブラウザによって見え方が… [続きを読む]

tcnさん (北海道/34歳/女性)

このQ&Aの回答

font-familyについて 芹川 隆(パソコン講師) 2013/04/11 09:35

このQ&Aに類似したQ&A

動的出力を考慮に入れたHTML・CSSの作成について かなりもりだくさん  2009-05-21 18:21 回答6件
グーグル検索結果での問題点について matumatukodomoさん  2011-08-06 03:23 回答4件
webサイト制作/ピンインの表示が文字化けします… raoraoさん  2010-07-29 15:08 回答2件