中国フォントではiOS9以降ではPingFang SCを指定必要

画面を開発する際に、文字の表示は考えなければならない問題です。なぜならば、文字が正常に表示されない場合があるからです。これは困りますね。

font-familyは複数のフォント名称を「ロールバック」システムとして保存することができます。すべての主流ブラウザでfont-family 属性がサポートされています。もし、ブラウザが最初のフォントをサポートしない場合、その次をトライして見ます。つまり、font-family 属性の値はある元素のフォント群の名称またはクラス群の名称のプライオリティ表です。ブラウザでは、その識別できる最初の値が使われます。デフォルトの場合、ブラウザのフォントは宋体です。常用の中文フォントとして、宋体、微软雅黑などがあります。英文フォントとしてよく使われるのはTimes New Roman、Arialです。

ユーザのそれぞれの端末では、インストールされているフォントがそれぞれ異なります。“p{font-family:微软雅黑,Arial,Times New Roman;}” と定義するための意味は、p元素が“微软雅黑”というフォントを優先して表示する仕組みです。もし、端末には“微软雅黑”というフォントがインストールされていない場合、引き続き“Arial”というフォントで表示します。“Arial”というフォントもインストールされていない場合、引き続き“Times New Roman” というフォントで表示していきます・・・。そうでなければ、“p{font-family:微软雅黑;}”しか定義しない場合、また、端末には“微软雅黑”とのフォントがインストールされていない場合、p元素が直接、ブラウザでデフォルトで設定された“宋体”というフォントで表示することになります。

表示について、よくあるフォントは次のとおりです。

Font Awesome は地球を風靡するアイコンフォントライブラリとCSSフレークワークです。Font Awesome より縮小・拡大できるベクターアイコン（つまり、フォントライブラリ）を提供しています。あなたはCSSを使って大きさとか、色とか、シェードとか、または他のいかなるサポートされる効果などFont Awesomeを変更することが可能です。

Windowsの場合、デフォルトではArialがインストールされています。Arial のレンダー効果はHelvetica より良いです。Mac OS Xの場合、デフォルトではArial、Helveticaがインストールされており、レンダーの場合は両方とも正常です。

Helveticaは広く使われている西洋のフォントであり、ラテン文字やキリル文字の国に広く使われています。同じスタイルもギリシャ文字、ヘブライ文字および漢字にまで移植されています。
Helveticaはアップル社のデフォルトのフォントです。マイクロソフトでよく使われているArialというフォントもHelveticaからのものです。Helveticaはデザイナにもっとも人気のあるフォントと評価されており、Macの場合、最高のWebページのフォントとされています。そのため、HelveticaはMac OSシステムのデフォルトのフォントとなるわけです。

苹方フォント（PingFang SC）はアップル社から作り出された真新しいフォントです。苹方フォントはアップルの動的なフォントの調節技術であり、自動的にフォントのサイズをもとに動的に文字の間隔およびフォントの高さを調節することによって最適な閲覧効果の達成が可能になります。

Myriad ProフォントはApple社とAdobe社の公式のフォントです。AdobeのMyriad ProとMinion Proは多くのユーザにとってはなじみのものと言えます。

苹果丽黑フォントHiragino Sans GBはApple社から提唱され、漢儀会社と日本のフォント会社が共同で開発されたものです。以下に示すとおりに、簡体字と繁体字を結びつけるフォントです。

iOS9.0までは、苹方フォントPingFangSCがなかったのです。苹方フォントを使いたい場合、iOS9.0以降のバージョンでなければなりません。9.0より古いバージョンのシステムからこのフォントが見つかりません。iOS 9より真新しい「苹方（PingFangSC）」が誕生しました。このフォントは電子ディスプレイ専用のものであり、中国人のユーザのためのものでもあります。これで簡体字と繁体字のいずれかが一段とはっきりと読みやすくなり、文字の形もスマートになり、6つのスタイルがあるなど、日常のデザインや閲覧などのニーズに応えられます。苹方フォントはもっとも細いフォントと半太文字を含める6種類の太さの変化を提供しています。フォントの太さから、タイトルや字幕などのアレンジの際にもっと柔軟な選択が可能になります。

微软雅黑はVista以降に新たに導入されたフォントです。Cleartypeを開けば表示効果がやさしくなりますが、開かない場合、Cleartypeがしっかりとしていないように見えます。

serif フォントは大文字において特に目立っています。sans-serif フォントはserifフォントと比べて、その外形がより簡単です。

ちなみに、英文字のフォントのレンダーが普段、中文のフォントよりレンダーの効果が良いため、英文字のフォントの宣言は中文のフォントの前に置かれているわけです。

上記に踏まえてfont-familyの書き方は次のとおりです。

font-family: FontAwesome, Arial, Helvetica, ‘PingFang SC’, ‘Myriad Pro’, ‘Hiragino Sans GB’, ‘Microsoft Yahei’, ‘微软雅黑’, sans-serif;

以上より、ご参考になれれば、幸いです。