カスタム フォントを定義するにはどのような 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";"

互換性のあるブラウザ

@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]です。

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 */
   }

HTML コード:

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

  @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 サイトの他の関連記事を参照してください。