CSS で非標準フォントを Web サイトに追加するにはどうすればよいですか?

非標準フォント は、ほとんどのブラウザで利用できるデフォルトのフォント セットに属さない CSS のフォントを指します。デフォルトのフォントには、Arial、Times New Roman、Verdana が含まれます。これらは、ほとんどのコンピュータやデバイスにプレインストールされているため、標準フォントです。

非標準フォントとは、プリインストールされていないフォントを指し、使用する前に Web サイトに特別にロードする必要があります。これらのフォントは、Google、Adobe、MyFonts などの Web サイトから入手できます。カスタム設計または購入することもできます。

標準以外のフォントを使用すると、Web サイトのデザインにユニークで個人的な雰囲気を加えることができます。特定の外観を作成したり、ブランドの視覚的アイデンティティを確立したりするためによく使用されます。

CSS で非標準フォントを Web サイトに追加する

タイポグラフィは、Web サイトをデザインする際に重要な役割を果たします。 Arial、Times New Roman、Verdana など、CSS で提供されるデフォルトのフォントは、機能的には利用できますが、多くの場合、当たり障りのない汎用的なものに見えます。

@font-face ルールを使用すると、フォント ファイルとプロパティを指定して、ページ上の特定の要素にフォントを適用できるようになります。

構文

@font-face ルールを使用するための構文は次のとおりです -

この例では、フォント ファミリを「MyFont」として指定しました。これは、CSS 全体でこのフォントを参照するために使用される名前です。 「src」属性はフォント ファイルの場所を指定し、「format」属性はフォントのファイル形式を指定します。ブラウザーの互換性を高めるために、truetype、woff、woff2、eot などの複数のフォント形式を含めることをお勧めします。

@font-face ルールを使用してフォントを定義すると、「font-family」属性を使用してページ上の特定の要素にフォントを適用できます。以下の例では、カスタム フォント「MyFont」を「body」要素 -

Example

Example

@import を使用して、Google Fonts やその他のフォント ホスティング サービスなどのリモート ソースからフォントをインポートすることもできます。

Example

Example

上記の手順により、Web サイトに非標準フォントを追加することができました。フォントが正しくレンダリングされるためには、フォント ファイルがサーバー上でホストされ、ブラウザからアクセスできることを確認することが重要であることに注意してください。

以上がCSS で非標準フォントを Web サイトに追加するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。