埋め込みフォントスタイリング - CSSスタイリング対埋め込みフォントスタイル

Question

私は違いがこのようなサイトに埋め込むフォントの間にあるかを理解するために願っています：

@font-face { 
    font-family: 'Kulturista Medium'; 
    src: url('fonts/Kulturista Medium.eot'); 
    src: local('☺'), url('fonts/Kulturista Medium.woff') format('woff'), url('fonts/Kulturista Medium.ttf') format('truetype'), url('fonts/Kulturista Medium.svg') format('svg'); 
    font-weight: normal; 
    font-style: normal; 
} 
@font-face { 
    font-family: 'Kulturista Semibold'; 
    src: url('fonts/Kulturista Semibold.eot'); 
    src: local('☺'), url('fonts/Kulturista Semibold.woff') format('woff'), url('fonts/Kulturista Semibold.ttf') format('truetype'), url('fonts/Kulturista Semibold.svg') format('svg'); 
    font-weight: normal; 
    font-style: normal; 
} 
@font-face { 
    font-family: 'Kulturista Semibold Italic'; 
    src: url('fonts/Kulturista Semibold Italic.eot'); 
    src: local('☺'), url('fonts/Kulturista Semibold Italic.woff') format('woff'), url('fonts/Kulturista Semibold Italic.ttf') format('truetype'), url('fonts/Kulturista Semibold Italic.svg') format('svg'); 
    font-weight: normal; 
    font-style: normal; 
} 

対ちょうどこの

のような1つのフォントをロードします私はそうあなたが望んでいないだろう、メリットがあります想像

@font-face { 
    font-family: 'Kulturista'; 
    src: url('fonts/Kulturista.eot'); 
    src: local('☺'), url('fonts/Kulturista.woff') format('woff'), url('fonts/Kulturista.ttf') format('truetype'), url('fonts/Kulturista Medium.svg') format('svg'); 
    font-weight: normal; 
    font-style: normal; 
} 

とCSS

body { 
    font-family: 'Kulturista', Fallback, sans-serif; 
    font-style: italic; 
    font-weight: bold; 
} 

とスタイリングより多くのリソースをロードできます。それらすべてを使用することによって、あなたがすべてのブラウザをカバーすることができるように

Answer 1

ブラウザでは、彼らがためには、Internet Explorerを除く、すべての最新ブラウザでサポートされているされているクロスブラウザ

TTF and OTF

、フォントの種類を読んでそれらは部分的にしかサポートされていません。

WOFF

それは、AndroidのブラウザとiOSのSafariの古いバージョンの古いバージョンを除いて、ほぼすべてのブラウザでサポートされています。

EOT

はInternet Explorerのみでサポートされているフォントファイルの種類で、あなたの主な問題についてはバージョンのInternet Explorer 8上と

---

の上に働く、あなたの第一の例を使用して以来、最高のアプローチですとfont-styleの各@font-faceルールの宣言を各フォントのプロパティと一致するように変更し、それぞれのルールに同じfont-familyという名前を使用すると、CSSファイルで過度に特定する必要はなくなりました。

詳細はhere