@font-faceと複数のフォントフォーマット

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

  @font-face {
    font-family: 'YourWebFontName';
    src: url('YourWebFontName.eot?#iefix') 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 */
   }

三、フォントの取得方法
https://www.fontsquirrel.com/
四、フォントフォーマットの変換
http://www.freefontconverter.com/http://font2web.com/http://www.youziku.com/
五、中国語のフォント
中国語のフォントが大きいので、他の方法で実現するには、有字網を参考にすることができます.
参考記事:
http://www.phpvar.com/archives/2663.html http://www.w3cplus.com/content/css3-font-face
拡張
アイコンフォント