CSS の Web セーフフォントとフォールバックフォントとは何ですか?-CSSチュートリアル-php.cn

CSS の Web セーフフォントとフォールバックフォントとは何ですか?

王林

リリース： 2023-08-25 23:33:12

転載

1615 人が閲覧しました

CSS 中的网络安全字体和后备字体是什么？

ウェブサイトは、企業、製品、サービスに関する情報をユーザーに提供することを目的として設計されています。どの Web サイトも、読者が反応できるように明確で美しい必要があります。 Web サイトのタイポグラフィーは、Web サイトに一貫性を持たせ、見た目の美しさを与える重要な要素です。 Web サイト全体の個性は、ブランドアイデンティティを作成する上で重要な タイポグラフィ によって構築されます。ユニークで一貫したタイポグラフィを使用すると、ユーザーは特定のフォントをあなたのブランドに関連付けるようになります。優れたタイポグラフィを使用すると、読者の興味を維持し、Web サイトに長く留まるように説得できます。しっかりとしたグラフィックのバランスと強力な視覚的階層を生成することで、Web サイトの全体的なトーンを確立するのに役立ちます。意思決定の方法に影響を与え、読者がテキストの内容をどのように処理および解釈するかに大きな影響を与えます。コンテンツが魅力的なものとなり、Web サイトの読みやすさに影響を与えます。

Google が開発者向けに導入したさまざまな Web セーフフォントを通じて、次のことができます。ダウンロードは無料です。この記事では、Web セーフフォントとフォールバックフォントについて説明します。

CSS によって提供されるフォントは開発者が利用できます。

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

Web セーフフォント

は、あらゆるデバイス上のすべてのブラウザでサポートされているフォントです。これらのフォントを使用すると、ユーザーのデバイスにフォントがインストールされていない場合でも、開発者はフォントを適切に表示できます。 Web セーフフォントが開発される前は、フォントがユーザーのローカルシステムにインストールされていない場合、ブラウザには Times New Roman

などの汎用フォントが表示されていました。ただし、開発者はサーバー側でフォントが正しく表示されているかどうかを検出できません。これにより、ユーザーエクスペリエンスが低下します。

Web セーフフォントを使用すると、この問題は解決されます。Web デザイン中に Web セーフフォントを使用すると、フォントがすべてのデバイスでそのまま表示されるので安心です。＃＃＃文法＃＃＃リーリー

Webセーフフォントの種類

Web セーフフォントは 6 つあります。それらは次のとおりです-

Serif

- これらのフォントには、各文字の本文に小さな突起が含まれており、画面や印刷されたフォーム上で読みやすくなっています。セリフフォント。

等幅
- これらのフォントは、文字間の間隔が等しいフォントです。 Space Mono、Courier、Inconsolata などはすべて固定幅フォントです。

サンセリフフォント
- これらのフォントはセリフフォントの逆です。小さな突起はありません。サンセリフフォントの例としては、Arial、Helvetica、Futura、Calibri などが挙げられます。

ファンタジー
- これらのフォントは高度に様式化され、装飾的です。 Papyrus、Herculanum、Luminari はファンタジーなフォントです。

MS
- これらは Microsoft によって導入されたフォントです。Trebuchet MS、MS Gothic、Georgia などは MS フォントです。

筆記体
- これらのフォントは筆記体に似ています。 Brush Script MT、Broadley、Monarda、Raksana などはいくつかの筆記体フォントです。
＃＃＃例＃＃＃リーリー CSS のフォールバックフォントとは何ですか?
CSS は、Web デザイン用に 2 種類のフォントファミリを提供します。これらは、セリフ (Times New Roman、Georgia など) などの汎用フォントファミリと、Arial、Calibri などの個別のフォントファミリです。

フォールバック

メカニズムが用意されています。代わりに使用されます。これらのフォントは代替フォントと呼ばれます。 100% 安全な Web フォントはないため、Web デザインのバックアップとして使用されます。エラーの可能性は常にあります。

バックアップ

フォントはバックアップとして機能することでこの問題を解決します。 Web セーフフォントであるフォントファミリをフォールバックフォントとして設定することもできます。

代替

フォントの例には、筆記体、ファンタジー、等幅フォントなどが含まれます。

＃＃＃文法＃＃＃リーリー

Font2、font3、font4 は、バックアップとして使用されるフォールバックフォントです。ブラウザが font1 をサポートしていない場合は、font2 が表示されます。font2 をサポートしていない場合は、font3 が使用されます。 ＃＃＃例＃＃＃リーリー 上記の例では、テキストのフォントファミリは font1 です。ブラウザが font1 フォントファミリをサポートしていない場合は、その横にフォールバックフォントとして使用できるフォントファミリのリストが表示されます。 ＃＃＃結論＃＃＃ Web デザインで Web セーフフォントを使用することは、開発者がユーザーのデバイスに確実に表示されるようにするため、推奨されます。ただし、Web セーフフォントは 100% 信頼できるわけではありません。したがって、CSS フォールバックフォントをフォントのバックアップとして使用して、あるフォントファミリが機能しない場合に、ブラウザがリストされている別のフォントファミリを試すことができるようにすることができます。共通のフォントファミリを最初のフォントとして使用し、その後、他のオプションにも同じフォントファミリを使用することをお勧めします。

以上がCSS の Web セーフフォントとフォールバックフォントとは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。