fontFaceの使い方

まず、常用フォントブラウザの互換性について説明します.一、TureTpe(.ttf)フォーマット:.ttfフォントはWindowsとMacの最も一般的なフォントであり、RAWフォーマットであるため、彼はウェブサイトを最適化しない.このフォントをサポートするブラウザには「IE 9+、Firefox 3.5+、Chrome 4+、Safari 3+、Opera 10+、iOS Mobile Safari 4.2+」がある.二、OpenType(.otf)フォーマット:.otfフォントは元のフォントフォーマットとされ、TureTypeに内蔵されているため、このフォントをサポートするブラウザには【Firefox 3.5+、Chrome 4.0+、Safari 3.1+、Opera 10.0+、iOS Mobile Safari 4.2+】があります.三、Web Open Font Format(.woff)フォーマット:.woffフォントはWebフォントの中で最も良いフォーマットで、彼はオープンなTrueType/openTypeの圧縮バージョンで、同時にメタデータパッケージの分離をサポートして、このようなフォントをサポートするブラウザは【IE 9+、Firefox 3.5+、Chrome 6+、Safari 3.6+、Opera 11.1+】があります;四、Embedded Open Type(.eot)フォーマット:.eotフォントはIE専用フォントで、TrueTypeからこのフォーマットフォントを作成できます.このフォントをサポートするブラウザには【IE 4+】があります.五、SVG(.svg)フォーマット:.svgフォントはSVGフォントレンダリングに基づくフォーマットで、このフォントをサポートするブラウザには【Chrome 4+,Safari 3.1+,Opera 10.0+,iOS Mobile Safari 3.2+】があります.これは、@font-faceで少なくとも必要であることを意味します.woff,.eotの2つのフォーマットのフォントは、さらに必要です.svgなどのフォントは、より多くのブラウズバージョンでサポートされています.
ブラウザをよりサポートするためにfontface構文は次のように書くことができます.

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

次のように使用できます.

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

詳細アドレス:http://www.w3cplus.com/content/css3-font-face