検索
ホームページウェブフロントエンドCSSチュートリアルCSS の Web セーフ フォントとフォールバック フォントとは何ですか?

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 サイトの他の関連記事を参照してください。

声明
この記事はtutorialspointで複製されています。侵害がある場合は、admin@php.cn までご連絡ください。
スライドアウトフッタースライドアウトフッターApr 09, 2025 am 11:50 AM

マークアップと呼ばれる魅力的な新しいサイトが起動しました。キャッチフレーズ:Big Techがあなたを見ています。ビッグテクノロジーを見ています。 Upstatementからの素晴らしい仕事。

好きなページ好きなページApr 09, 2025 am 11:47 AM

先日、JavaScriptでRSSフィードを解析することについて投稿しました。また、RSSのセットアップについて、Feedbinがその中心にある方法について話していることについても投稿しました。

Sanity.ioのためにCodepen Gutenberg Embed Blockを再現しますSanity.ioのためにCodepen Gutenberg Embed Blockを再現しますApr 09, 2025 am 11:43 AM

Chris CoyierのWordPressのGutenbergエディターの実装に触発された、Sanity StudioのプレビューでカスタムCodepenブロックを作成する方法を学びます。

CSSでラインチャートを作成する方法CSSでラインチャートを作成する方法Apr 09, 2025 am 11:36 AM

ライン、バー、パイチャートは、ダッシュボードのパンとバターであ​​り、データ視覚化ツールキットの基本的なコンポーネントです。確かに、SVGを使用できます

SASSをプログラミングして、アクセス可能な色の組み合わせを作成しますSASSをプログラミングして、アクセス可能な色の組み合わせを作成しますApr 09, 2025 am 11:30 AM

私たちは常にWebをよりアクセスしやすくしたいと考えています。色のコントラストは単なる数学なので、SASSはデザイナーが見逃したかもしれないエッジケースをカバーするのに役立ちます。

SVGでタータンパターンを生成する静的サイトを作成する方法SVGでタータンパターンを生成する静的サイトを作成する方法Apr 09, 2025 am 11:29 AM

タータンは、スコットランド、特にファッショナブルなキルトに通常関連する模様のある布です。 Tartanify.comでは、5,000を超えるTartanを集めました

PHPテンプレートのフォローアップPHPテンプレートのフォローアップApr 09, 2025 am 11:14 AM

少し前に、PHPのテンプレートについてJust Php(基本的にHeredoc構文)に投稿しました。私は文字通り、いくつかの超基本にその手法を文字通り使用しています

ブートストラップコンポーネントを備えたモーダルイメージギャラリーの作成ブートストラップコンポーネントを備えたモーダルイメージギャラリーの作成Apr 09, 2025 am 11:10 AM

他の写真を表示するためにナビゲーションを使用して画像の大きなバージョンを開くWebページの画像をクリックしたことがありますか?

See all articles

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

SecLists

SecLists

SecLists は、セキュリティ テスターの究極の相棒です。これは、セキュリティ評価中に頻繁に使用されるさまざまな種類のリストを 1 か所にまとめたものです。 SecLists は、セキュリティ テスターが必要とする可能性のあるすべてのリストを便利に提供することで、セキュリティ テストをより効率的かつ生産的にするのに役立ちます。リストの種類には、ユーザー名、パスワード、URL、ファジング ペイロード、機密データ パターン、Web シェルなどが含まれます。テスターはこのリポジトリを新しいテスト マシンにプルするだけで、必要なあらゆる種類のリストにアクセスできるようになります。

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

AtomエディタMac版ダウンロード

AtomエディタMac版ダウンロード

最も人気のあるオープンソースエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい