クロス ブラウザ、クロス プラットフォーム、およびすべてのデバイスと互換性のある css フォント スタックを作成するにはどうすればよいですか?
7 に答える
通常のコンピューターで使用できるフォントを保証できるのと同じ方法で、モバイル デバイスで使用されるフォントを保証することはできません。
安全な方法は、モバイル ブラウザが解釈して関連するフォントを表示できる一般的なフォント ファミリを使用することです。
font-family: serif; /* (e.g., Times) */
font-family: sans-serif; /* (e.g., Helvetica) */
font-family: monospace; /* (e.g., Courier) */
最善の解決策は、特定のフォントの後に常に一般的なフォント ファミリを指定することです。
font-family: "Foo Regular", "Bar Sans", sans-serif;
多分このリンクはあなたにいくつかのアイデアを与えることができます:
http://www.ampsoft.net/webdesign-l/WindowsMacFonts.html
上記のフォントファミリーを使用しても問題はありませんでした。
'font-family' プロパティに関する W3C 勧告の 15.3 では、Web サイトの訪問者がいくつかの実行可能な選択肢を持てるように、フォント スタックにフォールバック フォントを用意する必要があると指摘しています。
私が使用している「Web セーフ」フォント スタックは、すべてではないにしてもほとんどのデバイスをカバーしています。
/* Web Safe Font Stacks (classes set in CSS) */
.head {font-family: Georgia,'Times New Roman',serif}
.para {font-family: Verdana,Arial,sans-serif}
.mono {font-family:'Courier New',Courier,monospace}
.fant {font-family: Papyrus,Impact,fantasy}
.curs {font-family:'Apple Chancery','Lucida Calligraphy',cursive}
これには、ヘッダー、段落、コード サンプルのモノスペース、特別なアイテムのファンタジー、および強調のための筆記体が含まれます。ヘッダー (H1~H6) 用に 1 つ、本文テキスト用にもう 1 つ必要な場合があります。
body {font-family: Verdana,Arial,sans-serif}
h1, h2, h3, h4, h5, h6 {font-family: Georgia,'Times New Roman',serif}
Linux と iOS を含む 2010 年の次のチートシートを確認してください。Windows、Mac、Linux、および iOS 間の使用率の平均を示します。Web セーフ フォント
Mac および Windows オペレーティング システム、Microsoft Office、およびAdob e Creative Suite にバンドルされているフォントのマトリックス
クロス ブラウザー クロス プラットフォームのフォント スタックのことは忘れてください。Web の例は通常、基本的なラテン語の Windows と OSX のみを考慮し、国際言語と Linux、および新しいフォーム ファクターでは失敗します。
Linux は、ライセンス上の理由から、Windows や OSX と同じフォントを使用したことはありません。フォント デザイン ツールは十分に成熟しており、今日では多くの多様性が見られます (大きなエンコーディング フォントを作成するのは簡単ではありませんが、多くのユーザーは、彼らの特定の言語をカバーします)。
フォントの作成は安価になり、大企業 (モバイル メーカーを含む) は大きなリリース (新しいデバイスまたは主要な OS バージョン) 用に新しいフォントを委託することで差別化を図ろうとしています。
フォント調査がまだ人気があったとき、DejaVu フォント ファミリーは Linux で多くのリーチを持っていましたが、今はそうではないかもしれません。DejaVu と Arial のメトリックは異なります。
スタックで一般的な CSS フォント ファミリを使用し、ヘルベチカの派生物を避け、特定のフォント メトリックに依存するデザインを使用しないだけで問題ありません。