CSS 3@font-face紹介

紹介

構文

例

ブラウザは

をサポート

フォントファイルフォーマット変換

注意

紹介する

@font-face文はcssの機能モジュールであり、Webページのフォントの多様性を実現するために使用されます(設計者は任意にフォントを指定することができ、閲覧者のパソコンにインストールするかどうかを考慮する必要はありません).主に自分で定義したWebフォントをあなたのWebページに埋め込むことです.

構文

@font-face {
	font-properties
}

フォントの説明
値
説明
font-family
name
必須です.フォントの名前を定義します.
src
URL
必須です.フォントのダウンロード先を定義
font-stretch
normalcondensedultra-condensedextra-condensedsemi-condensedexpandedsemi-expandedextra-expandedultra-expanded
オプション.フォントがどのように長くなるかを定義します.デフォルト値は「通常」(normal)
font-style
normalitalicoblique
オプション.フォントのスタイルを定義します.デフォルト値は「通常」(normal)
font-weight
normalbold100200300400500600700800900
オプション.フォントの太さを定義します.デフォルト値は「通常」(normal)
unicode-range
unicode-range
オプション.このフォントがUnicode文字をサポートする範囲を定義します.デフォルトは「ü+0-10 FFFF」

例

@font-face {
　　font-family: 'YT';   /*      YT       */
　　src: local('YourFontName.eot'), url('YourWebFontName.eot');
}
         YT              ：
h1{font-family:YT;}

srcは、テキストを表示するためのカスタムフォントを指定します.フォントは、ユーザがローカルにインストールフォントからロードまたはリモートサーバすることができる.local()関数が提供する場合、指定したフォント名をユーザーからローカルに検索し、一致する項目が見つかった場合、ローカルフォントが使用されます.そうでない場合、フォントはurl()関数を使用してダウンロードしたリソースを使用します.

srcに複数のフォントが定義されている場合、彼らも候補関係です.

srcで定義されているフォントや順序を変更した場合は、必ずブラウザを閉じて開いてから変更後の効果を見る必要があります.リフレッシュは見えません.

@font-faceルールにあります.font-familyの役割は、通常のセレクタのfont-familyとは異なるフォント変数を宣言することです.

ブラウザのサポート

Internet Explorer 8以降のIEバージョンでは@font-faceルールはサポートされていません.
IE 8+はマイクロソフト独自のEOTフォントのみをサポートしているが、他のブラウザではサポートされていない.他のブラウザではTTF(TrueType)とOTF(OpenType)の2種類のフォントをカスタムフォントとして設定できる
これは、@font-faceでは少なくとも2つのフォーマットフォントが必要であり、さらに必要であることを意味する.svgなどのフォントは、より多くのブラウズバージョンでサポートされています.
.TTFまたは.OTFは、Firefox 3.5、Safari、Operaに適用する.EOT、Internet Explorer 4.0+;SVG、Chrome、iPhoneに適用

フォントファイルフォーマット変換

フォントを使用する3つのファイルフォーマットを取得し、主流ブラウザで正常に表示できるようにします.
次に、あるフォントの3つのフォーマットファイルをどのように取得するかを解決します.一般的に、私たちが手元に(または設計リソースサイトで見つけた)このフォントのあるフォーマットファイルがあり、最も一般的なのは.TTFファイルは、このファイルフォーマットで残りの2つのファイルフォーマットに変換する必要があります.フォントファイルフォーマットの変換は、サードパーティのWebサイトで処理できます.
Transfonter Simple Online Font Converter FontsQuirrel Font Converter Tools Everything Fonts Online font converter Convertio.co
3つのフォーマットのフォントファイルを取得したら、次にスタイルシートにフォントを宣言し、必要な場所でフォントを使用します.

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

に注意

ここで使用するWeb fontsは依然として同ドメインによって制限されている(フォントファイルは、それを呼び出すページと同じドメインでなければならない)が、HTTP access controlsを使用してこの制限を解除することができる.

CSSセレクタで@font-faceを定義することはできません.たとえば、このように書くのは無効です:

.className { 
  @font-face { 
    font-family: MyHelvetica; 
    src: local("Helvetica Neue Bold"), local("HelveticaNeue-Bold"),
        url(MgOpenModernaBold.ttf);
    font-weight: bold; 
  } 
}