font-familyについて - 専門家回答 - 専門家プロファイル

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

芹川 隆
パソコン講師

- good

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:MS Pゴシック
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など試してみてください。

ブラウザ
Windows
Mac
HTML
CSS

評価・お礼

tcn さん

2013/04/11 11:41

GadgetShop 芹川様、ご丁寧な回答ありがとうございます!きちんとした専門家の先生に教えて頂くと納得です。いつもMacで表示されるようなフォントで全てのブラウザを統一したいと思いますので、早速取りかかってみます。

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

この回答の相談

CSSでの文字指定について

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

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

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

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

このQ&Aの回答

色々なOSで見えるように、複数の font-family を指定します 井上 みやび子(システムエンジニア) 2013/04/10 10:27

この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件