インポートしたフォントが CSS で機能しないのはなぜですか?

CSS でのフォントのインポート: 総合ガイド

カスタム フォントは、Web デザインに個性と独自性を加えます。ただし、デバイスに関係なく、すべてのユーザーがこれらのフォントにアクセスできるようにするのは困難な場合があります。効果的な解決策の 1 つは、CSS を使用してフォントをインポートすることです。

質問: 永続的なフォントの問題

あるユーザーが、CSS を使用してフォントをインポートする際に問題が発生しました。従来のアプローチに従っているにもかかわらず、フォントにはアクセスできないままでした。コードの一部を次に示します:

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

.EntezarFont {
    font-family: EntezareZohoor2, B Nazanin, Tahoma !important;
}</code>

回答: CSS コードの改良

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>

主要な変更:

1. URL のファイル拡張子: それぞれの src 属性に正しいファイル拡張子 (例: .eot、.ttf、.svg) を指定します。フォント形式。
2. フォント ファミリー引用符: フォント ファミリ名を一重引用符または二重引用符で囲みます。
3. フォント フォールバック: フォールバック フォントを含めます。 (例: B Nazanin、Tahoma) ブラウザーとデバイス間の互換性を確保します。
4. フォント アプリケーションの CSS セレクター: インポートされたフォントを適用する特定の CSS セレクター (例: #newfont) を定義します。

これらの調整を実装すると、CSS デザインでカスタム フォントを効果的に利用でき、フォントがすべてのユーザーにとってアクセスしやすく、視覚的に魅力的なものになります。

以上がインポートしたフォントが CSS で機能しないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。