する@ font-faceのカスタムフォントでCSS3モジュール

、@フォントフェースモジュールの紹介

　　@フォントフェースがある CSS3のモジュールでは、彼を中心と一緒にあなたのウェブページに埋め込まれたウェブフォント、独自の定義にする@ font-faceモジュールが登場、もはやWebを使用することはできませんWeb開発でフォントを使用安全なフォント。

1、@フォントフェース構文規則

@フォントフェース { 
    フォントファミリ：<YourWebFontName> 。
    SRC：<ソース> [<フォーマット>] [、<ソース> [<フォーマット>]] * 。
    [フォント重量：<重量>] 。
    [フォントスタイル：<スタイル>] ; 
}

2、@フォントフェースパラメータ説明

　　フォントファミリパラメータ：それはデフォルトのフォントのダウンロードを使用するのが最善である、カスタムのフォント名を指定します。

　　パラメータのソースは：フォント独自のストレージ・パスは、相対パスまたは絶対パスを指定することができ。

　　formatパラメータは：TrueTypeフォント、OpenTypeの、TrueTypeフォント-AAT、組み込みのOpenType、平均など：カスタムフォントフォーマットは主に、主に以下の値の種類をブラウザを識別するために使用されている指定します。

　　重みパラメータ：フォントが太字であるかどうかを指定します。

　　スタイルパラメータは：イタリックなどというように、そのようなフォントスタイルを指定します。

3、ブラウザの互換性

　　関与するフォントフェイス@ブラウザの互換性、フォントフォーマットの問題は、異なるブラウザは、フォントフォーマットが矛盾してサポート。

　　ブラウザのさまざまなバージョンは、一般的に次のように説明したフォントフォーマットの種類をサポートしています。

（1）TrueTpe（.TTF）フォーマット

　　フォントの.ttfは、最も一般的なWindowsとMacのフォントであるRAWフォーマットので、彼は、サイトの最適化ではありません、このフォントのブラウザは[IE9 +、Firefox3.5 +、Chrome4など+持ってサポートし、Safari3 +、Opera10 +、iOSのモバイルSafari4.2 +]。

（2）のOpenType（.OTF）フォーマット

　　.OTFフォントが考慮され、元のフォント形式 TureTypeに基づいて構築されている、ので、それはより多くの機能を提供しています。このフォントのブラウザをサポートして、[Firefox3.5 +、Chrome4.0 +、Safari3 .1 +、Opera10.0 +、iOSモバイル Safari4.2 + ]。

（3）WebOpenFontFormat（.woff）フォーマット

　　ウェブフォントはフォントです.woff 最高の形、彼が開いているTrueType / OpenTypeフォントの圧縮バージョンですが、また別のメタデータパッケージをサポートし、このフォントのサポートブラウザは[IE9 +、Firefox3.5 +、Chrome6 +持っています、 Safari3.6 +、Opera11.1 +]。

（4）EmbeddedOpenType（.eot）フォーマット

　　.eotフォントはIE固有のフォント、このフォーマットは、TrueTypeフォント、フォントサポートそのようなブラウザIE4 + []から作成することができます。

（5）SVG（.SVG）フォーマット

　　.SVGフォントがされたレンダリングSVGフォントに基づいて、このフォントブラウザ持つ[Chrome4など+、Safari3.1 +、Opera10.0 +サポートする形式、iOSのモバイルSafari3.2 +を]。

（6）ブラウザのバージョン互換性の概要

　　する@ font-faceでは、我々は少なくとも.woffを必要とし、さらに多くのサポートブラウザのバージョンを達成するために必要な2つの形式のフォント、フォントなど.SVGを.eot。

第二に、使用防弾構文は、より多くのブラウザのサポートに到達します

　　する@ font-faceのサポートより多くのブラウザを達成するために、ポール・アイリッシュはと呼ばれる独自の@フォントフェース構文書かれているフォントフェイス@防弾を：

@フォントフェース { 
    フォントファミリ：「YourWebFontName」 ; 
    SRC：URL（ '？YourWebFontName.eot'）フォーマット（ 'EOT'） ; / * IE * / 
    SRC：URL（ 'YourWebFontName.woff'）フォーマット（ 'WOFF'）、URL（ 'YourWebFontName.ttf'）フォーマット（ 'TrueTypeの'） ; / * 非IE * / 
}

　　各マルチブラウザのサポートを行うために、あなたはまた、次の形式を記述することができます。

@フォントフェース { 
    フォントファミリ：「YourWebFontName」 ; 
    SRC：URL（ 'YourWebFontName.eot'） ; / * IE9のcompatモード* / 
    SRC：URL（ '？YourWebFontName.eot #iefix'）フォーマット（ '組み込みのOpenType'）、/ * IE6-IE8 * / 
             URL（ 'YourWebFontName.woff'）フォーマット（ 'WOFF'） 、/ * 最近のブラウザ* / 
             URL（ 'YourWebFontName.ttf'）フォーマット（ 'TrueTypeの'）、/ * サファリ、アンドロイド、iOSの* / 
             URL（ 'YourWebFontName.svg＃YourWebFontName'）フォーマット（ 'SVG'） ;* / 
   }