main

どのブラウザでもキレイに文字を表示するfont-familyの指定方法とは?


Webサイト制作で細心の注意が必要なフォントの指定。
ユーザーのデバイスに指定したフォントがインストールされていなければ、指定
したフォントは表示されません。
サイトのイメージやフォントの流行もあるため、どうしたらよいか悩んでいる方
も多いのではないでしょうか。
今回は、どのブラウザでもきれいに文字を表示できる方法をご紹介します。

 

どのフォントを使用するか

デバイスごとにデフォルトでインストールされているフォントは異なります。
これは、搭載されているOSがデバイスごとに異なるためです。
まずは、 各OSでデフォルトでインストールされているフォントの中からよく使
用されているフォントを把握していきましょう。

 

【Windows】
欧文フォント:Arial,Times New Roman
和文フォント:メイリオ(vista以降), 游ゴシック体(8.1以降)

 

【Mac】
欧文フォント:Arial
和文フォント:ヒラギノ 角ゴシックProN W3,W6,W8, 游ゴシック体(10.9以降)

 

【iOS】
欧文フォント:Helvetica
和文フォント:ヒラギノ角ゴ ProN W3,W6

 

【Android】
欧文フォント:Droid Sans,Roboto(Android 4.0以降)
和文フォント:Droid Sans Japanese,モトヤフォント(Android 4.0以降)

 

フォントサンプル:

font_sample

 

どれもシンプルで読みやすいフォントですね。

 

ゴシック書体は、 一般的に読みやすさ等の観点からWebサイト制作で最も標準
的に利用されている書体です。

 

反対に、 明朝書体は落ち着いた印象があるため、 雑誌や新聞などの文書に多く
利用されています。

 

上記をふまえてきれいに見えるフォントをまとめてみましょう。

 

ゴシック書体:
Helvetica,Arial, Roboto, Droid Sans, 游ゴシック,ヒラギノ角ゴ ProN W3,メイリオ

明朝書体:
Times New Roman, 游明朝, ヒラギノ明朝 ProN W3,メイリオ

 

 

CSSでFont-Familyを指定する

Font-Familyを指定する際には、以下の点に注意が必要です。

Font-Familyの注意点

・先に記述したフォントが優先される。
・スペースや全角文字のあるフォントはダブルクオーテーションで囲む。
・欧文フォントと日本語フォントでは、欧文フォントを先に記述する。
・日本語フォント名は英語名も併記可能。日本語名を先に記述する。
・最後にsans-serif,serifを記述し、該当フォントがない環境にも対応する。

 

Font-Familyの指定方法

CSSを記述していきましょう。

 

【ゴシック書体の場合】

 

【明朝書体の場合】

 

このように記述することで、 先頭から順に使用デバイスにインストールされて
いるフォントが表示されるようになります。

そして、該当フォントがない場合に備えて、 各sans-serif,serifを設定すること
で各ブラウザ標準のゴシック体・明朝体のフォントで表示されます。

 

まとめ

いかがでしたでしょうか。
各デバイスのOSごとに表示できるフォントとブラウザの標準フォントを指定す
ることでどのブラウザでもきれいにフォントを表示することが可能になります。
フォントについては時代によってサポートの種類や流行に違いがあるため、 時
々チェックしてみると良いですね。

 

 

本サイトが運営するWebデザインのオンラインスクールが公開中! まずは無料トライアル!

NESTonline - テクノロジーとクリエイティブのプロを目指す人のためのオンラインスクール (詳細はこちら)-
好きなときに、好きな場所で、好きなだけ学べる。テクノロジーとクリエイティブのプロを目指す人のためのオンラインスクールを運営しています。
PhotoshopやCSS、実践的なWebグラフィックデザインなど、500レッスン以上の数十万円相当のプロを目指すカリキュラムが、月々2,500円でいつでもどこでも学べます。

Photoshopを動画でしっかり学ぶ


Next Articleフラットデザインに合う無料アイコン素材まとめ