TECH I.S.

CSS Webセーフフォント


Webセーフフォントとは何ですか?

Webセーフフォントは、すべてのブラウザとデバイスに共通してインストールされるフォントです。


代替フォント

しかし、100%完全に安全なフォントは存在しません。 フォントが見つからなかったり、正しくインストールされていなかったりする可能性は常にあります。 したがって、常にフォールバック・フォントを使用することが非常に重要です。 これは、font-familyプロパティに同様の「バックアップ・フォント」のリストを追加することを意味します。 最初のフォントが動作しない場合、ブラウザは次のフォントを試し、さらに次のフォントを試し......という具合です。 リストの最後には、必ず一般的なフォントファミリー名を付けてください。

ここでは、Tahoma、Verdana、sans-serifの3つのフォントタイプがあります。 2番目と3番目のフォントは、最初のフォントが見つからない場合のバックアップです。

p { font-family: Tahoma, Verdana, sans-serif; }
自分で試してみる »

HTMLおよびCSSに最適なWebセーフフォント

次のリストは、HTMLおよびCSSに最適なWebセーフフォントです。

  • Arial (sans-serif)
  • Verdana (sans-serif)
  • Tahoma (sans-serif)
  • Trebuchet MS (sans-serif)
  • Times New Roman (serif)
  • Georgia (serif)
  • Garamond (serif)
  • Courier New (monospace)
  • Brush Script MT (筆記体)

注:Webサイトを公開する前に、さまざまなブラウザーやデバイスでフォントがどのように表示されるかを必ず確認し、必ずfallbacksフォントを使用してください!


Arial(sans-serif)

Arialは、オンラインメディアと印刷メディアの両方で最も広く使用されているフォントです。 Arial は、Google ドキュメントのデフォルトフォントでもあります。

Arialは最も安全なWebフォントの1つであり、すべての主要なオペレーティングシステムで使用できます。

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet.

0 1 2 3 4 5 6 7 8 9

自分で試してみる »

Verdana(sans-serif)

Verdanaは非常に人気のあるフォントです。 Verdanaは小さなフォントサイズでも読みやすいです。

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet.

0 1 2 3 4 5 6 7 8 9

自分で試してみる »

タホマ ()

Tahoma フォントは、文字間のスペースが少なくなっています。

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet.

0 1 2 3 4 5 6 7 8 9

自分で試してみる »

Trebuchet MS(sans-serif)

Trebuchet MSは1996年にMicrosoftによって設計されました。このフォントは慎重に使用してください。すべてのモバイルオペレーティングシステムでサポートされているわけではありません。

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet.

0 1 2 3 4 5 6 7 8 9

自分で試してみる »

Times New Roman (serif)

Times New Romanは、世界で最も有名なフォントの1つです。それはプロフェッショナルに見え、多くの新聞や"ニュース"Webサイトで使用されています。また、Windows デバイスおよびアプリケーションの主要なフォントでもあります。

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet.

0 1 2 3 4 5 6 7 8 9

自分で試してみる »

Georgia (serif)

Georgiaはエレガントなセリフフォントです。さまざまなフォントサイズで非常に読みやすいため、モバイルレスポンシブデザインに適しています。

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet.

0 1 2 3 4 5 6 7 8 9

自分で試してみる »

Garamond (serif)

Garamondは、多くの印刷本で使用される古典的なフォントです。時代を超越した外観と優れた可読性を備えています。

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet.

0 1 2 3 4 5 6 7 8 9

自分で試してみる »

Courier New (monospace)

Courier Newは、最も広く使用されているmonospaceセリフフォントです。 Courier New はコーディング表示でよく使用され、多くの電子メール プロバイダーはデフォルトのフォントとして使用しています。 Courier New は、映画の脚本の標準フォントでもあります。

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet.

0 1 2 3 4 5 6 7 8 9

自分で試してみる »

Brush Script MT (筆記体)

Brush Script MTフォントは、手書きを模倣するように設計されています。エレガントで洗練されていますが、読みにくい場合があります。慎重に使用してください。

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet.

0 1 2 3 4 5 6 7 8 9

自分で試してみる »

ヒント:利用可能なすべてのGoogle フォントとその使用方法をチェックしてください。



プログラミング学習を加速させる

プログラミングをプロの講師に教えてもらいませんか。

テックアイエスのプログラミングスクールは初心者も大歓迎です。年齢制限もありません。転職・副業に強く、挫折させない手厚いサポートで稼ぐ力を身につけましょう!

スクールの詳細