ホームページ > ウェブフロントエンド > CSSチュートリアル > @font-face ルールを使用して CSS にフォントを適切にインポートするにはどうすればよいですか?

@font-face ルールを使用して CSS にフォントを適切にインポートするにはどうすればよいですか?

Patricia Arquette
リリース: 2024-11-03 10:55:03
オリジナル
197 人が閲覧しました

How to Properly Import Fonts in CSS using the @font-face Rule?

CSS でのフォントのインポート: 包括的なソリューション

Web 開発では、クライアントのコンピュータにインストールされていないフォントを使用することが必要になることがよくあります。コンピューター。これを実現するために、CSS は @font-face ルールを提供します。ただし、一部のユーザーは、提供されているコード スニペットで問題が発生する可能性があります:

<code class="css">@font-face {
    font-family: EntezareZohoor2;
    src: url(Entezar2.ttf) format("truetype");
}

.EntezarFont {
    font-family: EntezareZohoor2, B Nazanin, Tahoma !important;
}</code>
ログイン後にコピー

この問題に対処するために、CSS を使用してフォントを適切に定義する変更されたコード スニペットを次に示します。

<code class="css">@font-face {
    font-family: 'EntezareZohoor2';
    src: url('fonts/EntezareZohoor2.eot'), url('fonts/EntezareZohoor2.ttf') format('truetype'), url('fonts/EntezareZohoor2.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}

#newfont {
    font-family: 'EntezareZohoor2';
}</code>
ログイン後にコピー

このスニペットでは、@font-face ルールは次の仕様で正しく定義されています:

  • font-family: CSS で使用されるフォントの名前。この場合は 'EntezareZohoor2'.
  • src: フォント ファイルのソース。さまざまなブラウザ用の複数の形式が含まれます。
  • font-weight および font-style: フォントの太さとスタイルを定義するオプションのプロパティ。

さらに、newfont 要素は、font-family プロパティを設定することで、「EntezareZohoor2」フォントを使用するように定義されています。これらのガイドラインに従うことで、ユーザーはフォントを CSS に効果的にインポートし、クライアント コンピューターで適切に表示されるようにすることができます。

以上が@font-face ルールを使用して CSS にフォントを適切にインポートするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート