カスタム フォントを定義するにはどのような CSS ルールが必要ですか?

カスタム フォントを定義するには、CSS の「@font-face」ルールが必要です。 「@font-face」ルールは主にユーザー定義の Web フォントを Web ページに埋め込むためのもので、構文は「@font-face{font-family: 'フォント名';src:url('ファイルアドレス');}」です。 」。

このチュートリアルの動作環境: Windows 7 システム、CSS3&&HTML5 バージョン、Dell G3 コンピューター。

ページでカスタム フォントをサポートする方法を一言で言うと、@font-face を使用します。

@font-face は CSS3 のモジュールです。主に、独自に定義した Web フォントを Web ページに埋め込みます。 #module では、Web 開発でフォントを使用する場合、Web セーフ フォントしか使用できないことを心配しません。 @font-face の使い方を見てみましょう。 まず、

@font-face:

   @font-face {
      font-family: <YourWebFontName>;
      src: <source> [<format>][,<source> [<format>]]*;
      [font-weight: <weight>];
      [font-style: <style>];
    }

値の説明## の文法規則を見てみましょう。

#1. YourWebFontName: この値は、カスタマイズしたフォント名を参照します。ダウンロードしたデフォルトのフォントを使用することをお勧めします。これは、Web 要素のフォント ファミリを参照します。例: "font-family:"YourWebFontName";"

2。source: この値は、カスタマイズしたフォントのストレージ パスを指します。相対パスまたは絶対パスを指定できます。

3. 形式: この値は、カスタマイズしたフォントの形式を指します, 主にブラウザがそれを識別できるようにするために使用されます. その値には主に次のタイプが含まれます: truetype、opentype、truetype-aat、embedded-opentype、avgなど;

4. ウェイトとスタイル: これら 2 つの値についてよく理解しておく必要があります。ウェイトはフォントが太字かどうかを定義し、スタイルは主に斜体などのフォント スタイルを定義します。

互換性のあるブラウザ

@font-face とのブラウザ互換性の問題について言えば、これにはフォント形式の問題が関係します。ブラウザが異なるためです。フォント形式のサポートに一貫性がないため、ブラウザのさまざまなバージョンでどのような種類のフォントがサポートされているかを誰もが理解する必要があります。フォントに関連するいくつかの形式については先ほど簡単に説明しました。以下で個別に説明します。この問題について話しましょう。誰もがアイデアを持っています:

1. TrueTpe (.ttf) 形式:

.ttf フォントは Windows と Mac で最も一般的です フォントは RAW 形式です。このフォントをサポートするブラウザは [IE9、Firefox3.5、Chrome4、Safari3、Opera10、iOS Mobile Safari4.2];

2. OpenType (. otf) 形式:

.otf フォントは、TrueType に基づいて構築された独自のフォント形式と考えられているため、より多くの機能も提供します。このフォントをサポートするブラウザには、[Firefox3.5、 Chrome4.0、Safari3.1、Opera10.0、iOS Mobile Safari4.2];

3. Web オープン フォント形式(.woff ) 形式:

。 woff フォントは、Web フォントの中で最も優れた形式です。オープンな TrueType/OpenType 圧縮版です。メタデータ パッケージの分離もサポートし、このフォントのブラウジングもサポートしています。対応デバイスは [IE9、Firefox3.5、Chrome6、Safari3] です。 6, Opera11.1];

4. Embedded Open Type (.eot) 形式:

. eot フォントは IE 用の特別なフォントです。この形式のフォントは、 TrueType から作成されます。このフォントをサポートするブラウザは [IE4];

5 です。SVG (.svg) 形式:

.svg フォントは形式ベースですSVGフォントレンダリングについて このフォントをサポートしているブラウザは[Chrome4、Safari3.1、Opera10.0、iOS Mobile Safari3.2]です。

これは、@font-face では少なくとも 2 つの形式のフォント (.woff と .eot) が必要であり、さらに多くのブラウジング バージョンをサポートするには .svg やその他のフォントも必要であることを意味します。

@font-face がより多くのブラウザーをサポートできるようにするために、

Paul Irish

は

Bulletproof @font-face と呼ばれる独自の @font-face 構文を作成しました :

   @font-face {
	font-family: 'YourWebFontName';
	src: url('YourWebFontName.eot?') format('eot');/*IE*/
	src:url('YourWebFontName.woff') format('woff'), url('YourWebFontName.ttf') format('truetype');/*non-IE*/
   }

しかし、多くのブラウザでサポートされるようにするには、次のように書くこともできます。

   @font-face {
	font-family: 'YourWebFontName';
	src: url('YourWebFontName.eot'); /* IE9 Compat Modes */
	src: url('YourWebFontName.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
             url('YourWebFontName.woff') format('woff'), /* Modern Browsers */
             url('YourWebFontName.ttf')  format('truetype'), /* Safari, Android, iOS */
             url('YourWebFontName.svg#YourWebFontName') format('svg'); /* Legacy iOS */
   }

空虚な理論的知識をたくさん話した後、誰もが少しむずむずしているはずなので、最初にそれを実行しましょうW3CPLUS ホームページのナビゲーション セクションの青色のフォントがどのように実装されているかを見てください。このような DOM タグがある場合は、カスタム フォントを適用する必要があります:

HTML コード:

   <h2 class="neuesDemo">Neues Bauen Demo</h2>

@font-face を通じて独自の Web フォントを定義する:

  @font-face {
    font-family: 'NeuesBauenDemo';
    src: url('../fonts/neues_bauen_demo-webfont.eot');
    src: url('../fonts/neues_bauen_demo-webfont.eot?#iefix') format('embedded-opentype'),
	url('../fonts/neues_bauen_demo-webfont.woff') format('woff'),
	url('../fonts/neues_bauen_demo-webfont.ttf') format('truetype'),
	url('../fonts/neues_bauen_demo-webfont.svg#NeuesBauenDemo') format('svg');
    font-weight: normal;
    font-style: normal;
  }

ここでは相対パスを使用していますが、もちろん絶対パスを使用することもできます。この時点で、定義したフォントを実際のページに適用する必要があります:

   h2.neuesDemo {
      font-family: 'NeuesBauenDemo'
   }

効果:

(ビデオ共有を学ぶ: CSSビデオチュートリアル

)

以上がカスタム フォントを定義するにはどのような CSS ルールが必要ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。