検索
ホームページウェブフロントエンド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 までご連絡ください。
cohost.orgの失われたCSSトリックcohost.orgの失われたCSSトリックApr 25, 2025 am 09:51 AM

この投稿では、Blackle Moriは、CohostのHTMLサポートの限界を押し広げようとしている間に見つかったハックのいくつかを示します。あえてこれらを使用してください、あなたもCSS犯罪者とラベル付けされないようにしてください。

カーソルの次のレベルCSSスタイリングカーソルの次のレベルCSSスタイリングApr 23, 2025 am 11:04 AM

CSSを備えたカスタムカーソルは素晴らしいですが、JavaScriptを使用して次のレベルに物事を引き出すことができます。 JavaScriptを使用して、カーソル状態間で移行し、カーソル内に動的テキストを配置し、複雑なアニメーションを適用し、フィルターを適用できます。

Worlds Collide:スタイルクエリを使用したキーフレーム衝突検出Worlds Collide:スタイルクエリを使用したキーフレーム衝突検出Apr 23, 2025 am 10:42 AM

2025年には、互いに互いに跳ね返る要素を伴うインタラクティブなCSSアニメーションは、CSSにPongを実装する必要はありませんが、CSSの柔軟性とパワーの増加はLee'の疑いを補強します。

UI効果にCSSバックドロップフィルターを使用しますUI効果にCSSバックドロップフィルターを使用しますApr 23, 2025 am 10:20 AM

CSSバックドロップフィルタープロパティを使用してユーザーインターフェイスをスタイルするためのヒントとコツ。バックドロップフィルターを複数の要素間でレイヤー化する方法を学び、それらを他のCSSグラフィカル効果と統合して、精巧なデザインを作成します。

微笑んでいますか?微笑んでいますか?Apr 23, 2025 am 09:57 AM

まあ、SVG'の組み込みのアニメーション機能は、計画どおりに非推奨されることはありませんでした。確かに、CSSとJavaScriptは負荷を運ぶことができる以上のものですが、以前のようにSmilが水中で死んでいないことを知っておくのは良いことです

「かわいい」は見る人の目にあります「かわいい」は見る人の目にありますApr 23, 2025 am 09:40 AM

イェーイ、テキストワラップのジャンプを見てみましょう:サファリテクノロジーのプレビューにかなり着陸してください!しかし、それがChromiumブラウザーでの仕組みとは異なることに注意してください。

CSS-Tricks XLIIIを記録しますCSS-Tricks XLIIIを記録しますApr 23, 2025 am 09:35 AM

このCSS-Tricksアップデートは、アルマナック、最近のポッドキャスト出演、新しいCSSカウンターガイド、および貴重なコンテンツを提供するいくつかの新しい著者の追加の大幅な進歩を強調しています。

Tailwind'の@Apply機能は、響きよりも優れていますTailwind'の@Apply機能は、響きよりも優れていますApr 23, 2025 am 09:23 AM

ほとんどの場合、人々はTailwind'の@Apply機能を紹介します。このように展示されたとき、@Applyはまったく有望な音をしません。だからobvio

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衣類リムーバー

Video Face Swap

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

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

MantisBT

MantisBT

Mantis は、製品の欠陥追跡を支援するために設計された、導入が簡単な Web ベースの欠陥追跡ツールです。 PHP、MySQL、Web サーバーが必要です。デモおよびホスティング サービスをチェックしてください。

DVWA

DVWA

Damn Vulnerable Web App (DVWA) は、非常に脆弱な PHP/MySQL Web アプリケーションです。その主な目的は、セキュリティ専門家が法的環境でスキルとツールをテストするのに役立ち、Web 開発者が Web アプリケーションを保護するプロセスをより深く理解できるようにし、教師/生徒が教室環境で Web アプリケーションを教え/学習できるようにすることです。安全。 DVWA の目標は、シンプルでわかりやすいインターフェイスを通じて、さまざまな難易度で最も一般的な Web 脆弱性のいくつかを実践することです。このソフトウェアは、

mPDF

mPDF

mPDF は、UTF-8 でエンコードされた HTML から PDF ファイルを生成できる PHP ライブラリです。オリジナルの作者である Ian Back は、Web サイトから「オンザフライ」で PDF ファイルを出力し、さまざまな言語を処理するために mPDF を作成しました。 HTML2FPDF などのオリジナルのスクリプトよりも遅く、Unicode フォントを使用すると生成されるファイルが大きくなりますが、CSS スタイルなどをサポートし、多くの機能強化が施されています。 RTL (アラビア語とヘブライ語) や CJK (中国語、日本語、韓国語) を含むほぼすべての言語をサポートします。ネストされたブロックレベル要素 (P、DIV など) をサポートします。

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

強力な PHP 統合開発環境