CSSでフォント指定する時の安全な記述方法、OSにプリインストールされているフォントのまとめ -CSS Font Stack

CSSでフォントの指定をする時、Windowsだとうまく表示されるけど、Macだとダメ、またその逆のケースもあります。

Webページやアプリでフォントを安全に使うためには、OSにインストールされているフォントを知ることです。
そのフォントがWindowsとMacにどれくらいインストールされているのか、CSSでフォントを指定する時どうすればいいのか、がまとめられたCCS Font Stackを紹介します。

CSS Font Stack

海外のサイトなので、日本語フォントの情報や指定方法はありませんが、英語フォントは非常に充実しています。

各フォントのOSごとのインストール率

フォントはサンセリフ・セリフ・等幅など、フォントファミリーごとにまとめられており、それぞれのフォントをクリックすると、詳細情報が表示されます。

Arialの情報

Arialは、Windowsで99.84%、Macで98.74%。
ArialをCSSで指定する場合に、どのようにfont-familyを設定すれば安全に使えるかスタイルシートの記述も表示されます。

スタイルシートの記述

Helveticaは、Windowsで7.34%、Macで100%。
まぁ、そのくらいでしょう。

Helveticaの情報

セリフだと、Times New Romanあたりが一番安心できますね。

セリフ フォントの一覧

他にも、等幅やスクリプト系のフォント情報を揃っています。

等幅・装飾・スクリプト フォントの一覧