ホームページ >ウェブフロントエンド >CSSチュートリアル >CSS の Web セーフ フォントとフォールバック フォントとは何ですか?
ウェブサイトは、企業、製品、サービスに関する情報をユーザーに提供することを目的として設計されています。どの Web サイトも、読者が反応できるように明確で美しい必要があります。 Web サイトのタイポグラフィーは、Web サイトに一貫性を持たせ、見た目の美しさを与える重要な要素です。 Web サイト全体の個性は、ブランド アイデンティティを作成する上で重要な タイポグラフィ によって構築されます。ユニークで一貫したタイポグラフィを使用すると、ユーザーは特定のフォントをあなたのブランドに関連付けるようになります。 優れたタイポグラフィを使用すると、読者の興味を維持し、Web サイトに長く留まるように説得できます。しっかりとしたグラフィックのバランスと強力な視覚的階層を生成することで、Web サイトの全体的なトーンを確立するのに役立ちます。意思決定の方法に影響を与え、読者がテキストの内容をどのように処理および解釈するかに大きな影響を与えます。コンテンツが魅力的なものとなり、Web サイトの読みやすさに影響を与えます。
Google が開発者向けに導入したさまざまな Web セーフ フォントを通じて、次のことができます。 ダウンロードは無料です。この記事では、Web セーフ フォントとフォールバック フォントについて説明します。CSS によって提供されるフォントは開発者が利用できます。
Web セーフ フォントとは何ですか?
Web セーフ フォントは、あらゆるデバイス上のすべてのブラウザでサポートされているフォントです。これらのフォントを使用すると、ユーザーのデバイスにフォントがインストールされていない場合でも、開発者はフォントを適切に表示できます。 Web セーフ フォントが開発される前は、フォントがユーザーのローカル システムにインストールされていない場合、ブラウザには Times New Roman
などの汎用フォントが表示されていました。ただし、開発者はサーバー側でフォントが正しく表示されているかどうかを検出できません。これにより、ユーザー エクスペリエンスが低下します。Web セーフ フォントを使用すると、この問題は解決されます。Web デザイン中に Web セーフ フォントを使用すると、フォントがすべてのデバイスでそのまま表示されるので安心です。 ###文法### リーリー
Webセーフフォントの種類Web セーフ フォントは 6 つあります。それらは次のとおりです-
等幅
サンセリフ フォント
ファンタジー
MS
筆記体
###例### リーリー CSS のフォールバック フォントとは何ですか?
CSS は、Web デザイン用に 2 種類のフォント ファミリを提供します。これらは、セリフ (Times New Roman、Georgia など) などの汎用フォント ファミリと、Arial、Calibri などの個別のフォント ファミリです。フォントはバックアップとして機能することでこの問題を解決します。 Web セーフ フォントであるフォント ファミリをフォールバック フォントとして設定することもできます。
代替フォントの例には、筆記体、ファンタジー、等幅フォントなどが含まれます。
###文法### リーリーFont2、font3、font4 は、バックアップとして使用されるフォールバック フォントです。ブラウザが font1 をサポートしていない場合は、font2 が表示されます。font2 をサポートしていない場合は、font3 が使用されます。 ###例### リーリー 上記の例では、テキストのフォント ファミリは font1 です。ブラウザが font1 フォント ファミリをサポートしていない場合は、その横にフォールバック フォントとして使用できるフォント ファミリのリストが表示されます。 ###結論### Web デザインで Web セーフ フォントを使用することは、開発者がユーザーのデバイスに確実に表示されるようにするため、推奨されます。ただし、Web セーフ フォントは 100% 信頼できるわけではありません。したがって、CSS フォールバック フォントをフォントのバックアップとして使用して、あるフォント ファミリが機能しない場合に、ブラウザがリストされている別のフォント ファミリを試すことができるようにすることができます。共通のフォント ファミリを最初のフォントとして使用し、その後、他のオプションにも同じフォント ファミリを使用することをお勧めします。
以上がCSS の Web セーフ フォントとフォールバック フォントとは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。