CSSでフォント指定する時の安全な記述方法、OSにプリインストールされているフォントのまとめ -CSS Font Stack
Post on:2016年8月19日
CSSでフォントの指定をする時、Windowsだとうまく表示されるけど、Macだとダメ、またその逆のケースもあります。
Webページやアプリでフォントを安全に使うためには、OSにインストールされているフォントを知ることです。
そのフォントがWindowsとMacにどれくらいインストールされているのか、CSSでフォントを指定する時どうすればいいのか、がまとめられたCCS Font Stackを紹介します。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201603/2016081803.png)
海外のサイトなので、日本語フォントの情報や指定方法はありませんが、英語フォントは非常に充実しています。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201603/2016081805.png)
各フォントのOSごとのインストール率
フォントはサンセリフ・セリフ・等幅など、フォントファミリーごとにまとめられており、それぞれのフォントをクリックすると、詳細情報が表示されます。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201603/2016081804-01.png)
Arialの情報
Arialは、Windowsで99.84%、Macで98.74%。
ArialをCSSで指定する場合に、どのようにfont-familyを設定すれば安全に使えるかスタイルシートの記述も表示されます。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201603/2016081804-03.png)
スタイルシートの記述
Helveticaは、Windowsで7.34%、Macで100%。
まぁ、そのくらいでしょう。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201603/2016081804-04.png)
Helveticaの情報
セリフだと、Times New Romanあたりが一番安心できますね。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201603/2016081804-05.png)
セリフ フォントの一覧
他にも、等幅やスクリプト系のフォント情報を揃っています。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201603/2016081804-06.png)
等幅・装飾・スクリプト フォントの一覧
sponsors