Embedded Font Styling - Embedded Font Styles vs CSS Styling

Question

Ich hoffe, zu verstehen, was der Unterschied zwischen Einbetten von Schriften in einer Website ist wie folgt:

@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; 
} 

nur gegen eine einzige Schriftart wie diese

Laden

@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; 
} 

und Styling mit CSS

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

ich stelle mir ein Vorteil da ist, sonst würden Sie nicht wollen, um mehr Ressourcen zu laden.

Answer 1

Browser lesen verschiedene Arten von Schriftart, so von ihnen mit allen Sie alle Browser abdecken kann,

TTF and OTF

Sie sind in allen modernen Browsern unterstützt, mit Ausnahme von Internet Explorer ist, Cross-Browser für denen sie nur teilweise unterstützt werden.

WOFF

es wird von fast allen Browsern außer älteren Versionen von Android Browser und ältere Versionen von iOS Safari unterstützt.

EOT

ein Font-Datei-Typ ist nur vom Internet Explorer unterstützt, und arbeitet an Versionen Internet Explorer 8 und höher

---

In Bezug auf Ihrem Hauptproblem ist Ihr erstes Beispiel unter Verwendung der beste Ansatz seit Ändern der font-weight und font-style Deklarationen jeder @font-face Regel, um die Eigenschaften der einzelnen Fonts zu entsprechen, und den gleichen font-family Namen für jede Regel verwenden, müssen wir nicht mehr zu spezifisch in der CSS-Datei sein.

Sie können mehr lesen here