トップ Web関連 CSS関連 CSSのフォントの指定

CSSのフォントの指定

使用フォントの指定

指定したフォントで表示させる。

font-family: "固有フォント名","一般フォント名";
  • フォントの適応は左から順番に閲覧環境に適応するフォントを探し、マッチした時点で評価を止め、そのフォントで表示する。
  • フォント指定には固有フォント名称以外に字体を表す一般名称がある。(以下の表を参照)
  • フォント指定にはCSSのfont-familyプロパティにて指定をおこなう。
  • 指定がない場合にはブラウザのデフォルトフォントが使用される。
  • ブラウザ、OSによってデフォルトフォントに違いがある。
  • 出来るだけインストール環境OSやバージョンなどに依存するフォント指定は行わない。
  • フォントにはフォントファミリー名とフォント名とがあり、混用は・・・。
  • <font>〜</font>指定はHTML 4.01では非推奨でHTML5では廃止予定なので、face="フォント名"は使用しない。
  • Windows版のIE5.5及び、5.5SP1ではsans-serifを指定した場合に文字化けを起こす。(日本語を含んでいないフォントが使用されるため)
  • 日本語文字列を日本語を含まない欧文フォント指定で表示する場合、日本語環境のWebブラウザでは日本語フォントからその文字を補完して表示する。
  • 文字の字形によって文字ごとに時幅が調整されているプロポーショナルフォントと全ての文字が同じ幅を持つ等幅フォントがある。
  • 欧文フォントとして等幅フォントでも日本語が補完された場合、そのフォントとの比率が1:2とならない場合がある。
  • x-heightとは小文字のエックスの高さであり、欧文がほぼ小文字で書かれるため、記号等はこのサイズを基準としている場合が多い。(○、●など)
  • 日本語、英文まじりの文章で欧文フォント指定がなされている場合、欧文フォントに在る文字(○、●など)はそのまま使用されるのでサイズが合わなくなる場合がある。
  • WinとMacで共通のフォント(見た目が厳密に同じという訳ではない)Arial,Arial Black,Comic Sans MS,Courier,Courier New,Georgia,Impact,Times New Roman,Trebuchet MS,Verdana
  • サーバからフォントデータをダウンロードして文字に適応するウェブフォントというものもある。(厳密にこだわる、あるいはデザイン的な問題で必要とする場合)
  • 標準フォントを使用するように指定する場合は font-style:normal; とする。
  • 名前に 日本語 あるいは スペースが含まれるフォントは '〜' か "〜" で囲う。
  • Opera は、日本語名があるフォントに関しては日本語名しか受け付けないらしい。
フォント指定一般名
一般名 文字表記
serif 明朝体系
sans-serif ゴシック体系
cursive 手書き風、筆記体系
fantasy 装飾文字系
monospace 等幅フォント

Windows、Mac、使用するブラウザでそれぞれ一般名にデフォルトで指定されているフォントは違っている。(それぞれの比較キャプチャは もうパンツははかないさんのところを参照)

日本語フォント
OS フォント名称 1:2 Def
Windows 8/7/Vista MS Pゴシック       IE8.0 / FF3.6/4.0 / Sf5.0 / GC10.0 / Op11.0
MS ゴシック      
MS P明朝        
MS 明朝      
メイリオ        
Windows XP MS ゴシック        
MS 明朝        
MacOS X 10.5〜 ヒラギノ角ゴシック ProN        
ヒラギノ明朝 ProN       Safari 5.0/Chrome 10.0
MacOS X 10.0〜 ヒラギノ角ゴシック Pro       FF 3.6/4.0
ヒラギノ明朝 Pro       Opera 11.0
漢字Talk 9〜 Osaka        
Osaka-等幅      
細明朝体        
iOS HiraKakuProN-W3        
HiraKakuProN-W6        
HiraMinProN-W3        
Android Droid            
Droid Sans Japanese         Android、ボールド無し
Android 4.0 モトヤLシーダ3等幅        
モトヤLマルベリ3等幅        
欧文フォント
フォント名称 Win Mac iOS Android Def
Arial    
Courier 等幅。
Courier New     等幅。
Times New Roman     IE8.0 / Win Safari 5.0
Times         Mac Safari 5.0 /
Helvetica        
Helvetica NeueUI       iOSシステムフォント
Roboto         Android4.0システムフォント
Droid       Android用

各ブラウザのバージョン対応(というかIEの6や7対応)にはWorld Wide Web GuideさんとこのハックもIEの独自拡張条件式も使わないIE(6/7/8)のCSS上書きテクニックが必読。

Windows、Mac、使用するブラウザでそれぞれデフォルトで指定されているフォントは違っている。(それぞれの比較キャプチャは もうパンツははかないさんのところを参照)

それにもつけ、Windowsって7でさえ日本語は文字の表示が貧弱なのですね。英語はまだフォントの違いを判別できますが、日本語だと一文字切り出して違いを判別するどころかゴシックか明朝かも判然としない感じ。この文字の表示だけでちょっとイラッとしたりするのだけど、まぁ世の中では気にならないのでしょうね。

このサイトでの標準フォント(プロポーショナルフォント)指定
font-family: “ヒラギノ角ゴ Pro W3″,”Hiragino Kaku Gothic Pro”,”Osaka”,”メイリオ”,”Meiryo”,”MS Pゴシック”,”MS PGothic”,sans-serif;
特に明朝体を必要とする場合の指定
font-family: “ヒラギノ明朝 Pro W3″,”Hiragino Mincho Pro”,”Osaka”,”メイリオ”,”Meiryo”,”MS Pゴシック”,”MS PGothic”,sans-serif;

サイトをデザインする上でかっこいいフォント

CSSで指定するという事ではないけれど、デザインする上で使えるかっこいいフォントを『バンクーバーのうぇぶ屋』さんの『今更聞けない?!WEBデザイナーなら最低限知っておきたい有名フォントの数々』で紹介されていました。

投票数:35 平均点:10.00
前
CSSの使用方法を整理してみる
カテゴリートップ
CSS関連
次
CSSの文字サイズ指定

新しくコメントをつける

題名
ゲスト名
投稿本文
より詳細なコメント入力フォームへ

ライブラリ