CSSでの文字指定について

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

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

ホームページで表示させるfont-familyについてなのですが、ブラウザによって見え方が変わって来ると思います。Macだと綺麗に見える文字も、IEだとギザギザのような文字で表示され格好が悪くなってしまいます。これを回避するために、ある程度の指定をCSSで設定したいと思うのですが、どのようにすればよいのでしょうか？

例えば、アップルのホームページでは文字が綺麗に表示されています。
http://www.apple.com/jp/

優しい文字で、とても読みやすいです。
ご回答の程、宜しくお願い致します。

tcnさん（北海道 / 女性 / 34歳）

回答：2件

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

色々な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 PGothic",Sans-Serif;

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

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

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

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

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

ブラウザ

制作

文字

評価・お礼

tcnさん

2013/04/10 10:33

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

質問やお悩みは解決しましたか？解決していなければ...

※あなたの疑問に専門家が回答します。質問の投稿と閲覧は全て無料です。

芹川隆
パソコン講師

font-familyについて

2013/04/11 09:35 詳細リンク

: (5.0)

tcnさん、はじめまして。
千葉のGadgetShopの芹川と申します。

頂いたご質問についてですが、CSSでのfont-familyの指定は本当頭を悩ませますよね。
AppleのサイトのCSSの指定の一部ですが、下記の通り指定しております。

"Lucida Grande", "Lucida Sans Unicode", "Hiragino Kaku Gothic Pro",… Meiryo,,Helvetica, Arial, Verdana, sans-serif;
（一部文字化けなどがあり正式に全てを並べた訳ではありません。ご了承ください。）

まず、下記の3点をおさえておきましょう！

1.優先順位
font-familyは左に書いたものから優先的に適用され、パソコンで利用しているフォントの条件に合致したものを適用します。パソコンに別のフォントをインストールすればそれも適用対象になります。WindowsやMacなどのOSによって表示できるフォント、あるいはブラウザによって読み込み動作が異なるので、それらに対応できるよう、複数のフォントファミリー名を記述します。今回のApple社のページもかなりの指定をしています。

2.「sans-serif」や「serif」を最後に指定
これは、ユーザのパソコンに最低限のフォントファミリーを提供するためのものです。必ず指定しておきましょう。

3.設定でよく使われている和文フォントを指定
Windows 7／Windows Vista：メイリオ
WindowsXP：ＭＳＰゴシック
Mac：ヒラギノ角ゴ Pro W3

※
Windows 7／Windows Vistaの「メイリオ」と、Macの「ヒラギノ角ゴ Pro W3」は、きれいに表示されます。

WindowsやMacのようにOSの異なるユーザに対して同様の見せ方をしたいときには、「Web-font」を使うのもオススメです！
http://blog.petitboys.com/archives/webfont-services-japan.html

自分の納得するフォントで表示されるか色々font-familyの指定やWeb-fontなど試してみてください。