Webセーフフォントスタック

これらの信頼性の高いHTMLフォントをWebページで使用する

あなたのウェブサイトの両方のスタイルを伝える良いフォントスタックを見つけることは、大多数のウェブサイトで信頼性も高いことがあります。 ウェブセーフではないフォントを使用している場合、あなたのウェブサイトは、ブラウザが派手なフォントに驚くべき何かを置き換えようとしているように見えないかもしれません。

これらのフォントスタックは、 ファミリ (セリフ、モノスペースなど)で区切られています。 Webセーフフォントではないフォントを使用する場合は、最初にフォントスタックに配置し、最後にこれらのスタックの1つを追加する必要があります。

スタイルに最も近いフォントスタックを選択し、好みのフォントを探します。

Sans Serif Web Safeフォントスタック

サンセリフのテキストは、画面上でぼやけてしまうようなセリフがないため、Webページで読むのに適しています。

フォントファミリ:Arial、Helvetica、sans-serif;
font-family: 'Arial Black'、ガジェット、サンセリフ。
フォントファミリ:Impact、Charcoal、sans-serif;
font-family: 'MS Sans Serif'、ジュネーブ、サンセリフ。
フォントファミリ:Tahoma、Geneva、sans-serif;
フォントファミリ: 'Trebuchet MS'、Helvetica、sans-serif;
フォントファミリ:Verdana、Geneva、sans-serif;

セリフWebセーフフォントスタック

Serifフォントは見出しにはうまく機能します。 より大きなタイプの見出しは、セリフがモニター上でぼやけないことを意味します。

フォントファミリ: 'Book Antiqua'、 'Palatino Linotype'、Palatino、serif;
フォントファミリ:Bookman、serif;
フォントファミリ:Georgia、serif;
フォントファミリ: 'MS Serif'、 'New York'、serif;
フォントファミリ: 'Times New Roman'、Times、serif;

モノスペースフォントスタック

モノスペースフォントは、通常、すべての文字がタイプライターフォントのような同じ幅のフォントで最もよく見えるコードやその他のタイプをレンダリングするために使用されます。

font-family:Courier、モノスペース。
font-family: 'Courier New'、Courier、モノスペース。
font-family: 'Lucida Console'、モナコ、モノスペース。

モノスペースのフォントスタックの例を表示します。

筆記体フォントスタック

筆記体フォントは読みにくく、ほとんどのシステム(Comic Sans)で最も一般的に見つかっているフォントは、それと同じくらい多くの人が嫌いです。

font-family: 'Comic Sans MS'、筆記体。

ファンタジーフォントスタック

筆記体フォントのように、ファンタジーフォントは読みにくい場合があり、ほとんどのシステムではそれほど一般的ではありません。 実際に、サンセリフのカテゴリで私が上記で使用したものと同じフォントスタックを使用していることに気付くかもしれません。それは、インパクトと木炭が非常に独特でファンタジーフォントと見なされるからです。

font-family:インパクト、チャコール、ファンタジー。

ピンボケ、ウィングディング、またはシンボルフォントスタック

文字通りの文字や図形ではなくアイコンや絵が表示される記号フォントです。 これらのフォントには一般的なフォントの種類がないため、一部のコンピュータで期待どおりに異なるフォントが表示されることがあります。 さらに、 Internet Explorerだけがシンボルを表示します。 Firefoxやその他のブラウザは、ブラウザのデフォルトフォントでテキストを表示するだけです。

font-family:シンボル;
フォントファミリ:Webdings;
フォントファミリー:Wingdings、 'Zapf Dingbats';