Wie legen Sie Web-Font-Stacks mit mehreren Stilen fest?

Question

Web Fonts sind in der Regel in separate Dateien für fett, kursiv kommen aufgeteilt, usw. Ich bin ein @font-face Erklärungen wie diese verwenden (abgespeckte zu WOFF nur für dieses Beispiel):

@font-face { 
    font-family: 'OpenSans'; 
    src: url("fonts/OpenSans-Regular.woff") format("woff"); 
    font-weight: normal; 
    font-style: normal; 
} 

@font-face { 
    font-family: 'OpenSansItalic'; 
    src: url("fonts/OpenSans-Italic.woff") format("woff"); 
    font-weight: normal; 
    font-style: normal; 
} 

@font-face { 
    font-family: 'OpenSansBold'; 
    src: url("fonts/OpenSans-Bold.woff") format("woff"); 
    font-weight: normal; 
    font-style: normal; 
} 

Und ich dann implementieren die verschiedenen Stile:

body { 
    font-family: "OpenSans", Helvetica, sans-serif; 
} 

strong { 
    font-family: "OpenSansBold", Helvetica, sans-serif; 
    font-weight: normal; /* Web font is already bold */ 
} 

em { 
    font-family: "OpenSansItalic", Helvetica, sans-serif; 
    font-style: normal; /* Web font is already italic */ 
} 

Ich muss die UA fett/kursiv Styling (die kommentierten Zeilen oben) überschreiben. Andernfalls wird dem Text ein faux-bold/kursiv-Look hinzugefügt, der sehr hässlich ist.

Wenn ich es so lassen würde, und eine der Web-Font-Dateien nicht geladen werden konnte, dann hätte die Fallback-Schriftart nicht den richtigen Stil. Zum Beispiel diese:

<strong>This text is bold</strong> 

würde als Helvetica regelmäßige angezeigt, wenn OpenSans-Bold.woff konnte nicht geladen werden, aber ich will es Helvetica fett sein.

Wie stellen Sie sicher, dass Ihre Fallback-Schriftarten das richtige fett/kursiv/reguläre Styling erhalten?

Answer 1

Sie möchten Ihre @ font-face-Regeln kombinieren ..... deklarieren Sie nur einen Schriftfamiliennamen und deklarieren Sie die Gewichtungen als Ihre Variablen, wie fett, kursiv usw. Das folgende Beispiel zeigt, wie Sie Open verwenden Sans Regular mit Open Sans Bold:

@font-face{font-family:"open_sansregular"; 
src:url("http://dev.bowdenweb.com/a/fonts/sans-serif/open-sans/open-sans-regular.eot"); 
src:url("http://dev.bowdenweb.com/a/fonts/sans-serif/open-sans/open-sans-regular.eot?#iefix") format("embedded-opentype"), 
url("http://dev.bowdenweb.com/a/fonts/sans-serif/open-sans/open-sans-regular.woff") format("woff"), 
url("http://dev.bowdenweb.com/a/fonts/sans-serif/open-sans/open-sans-regular.ttf") format("truetype"), 
url("http://dev.bowdenweb.com/a/fonts/sans-serif/open-sans/open-sans-regular.svg#open_sansregular") format("svg"); 
font-weight:normal; font-style:normal} 

@font-face{font-family:"open_sansregular"; 
src: url("http://dev.bowdenweb.com/a/fonts/sans-serif/open-sans/bold/open-sans-bold.eot"); 
src: url("http://dev.bowdenweb.com/a/fonts/sans-serif/open-sans/bold/open-sans-bold.eot?#iefix") format("embedded-opentype"), 
url("http://dev.bowdenweb.com/a/fonts/sans-serif/open-sans/bold/open-sans-bold.woff") format("woff"), 
url("http://dev.bowdenweb.com/a/fonts/sans-serif/open-sans/bold/open-sans-bold.ttf") format("truetype"), 
url("http://dev.bowdenweb.com/a/fonts/sans-serif/open-sans/bold/open-sans-bold.svg#open_sansbold") format("svg"); 
font-weight:bold; font-style:normal} 

, wenn Sie vertraut wtih @ font-face-Regel sind, es ist so einfach ... die einzigen Unterschiede in den beiden oben genannten Regeln ist die uRL (s) und die font-weight . So kursiv, ändern Sie die URL, um auf die kursive Schriftart zu zeigen, und ändern Sie dann den Stil zu font-style:italic.

Es gibt eine Reihe von Vorteilen, die Sie daraus erhalten, einschließlich weniger Umschreibungen, weil Sie nicht jede Schrift neu deklarieren müssen ... Sie deklarieren es nur einmal.

aber das reduziert im Wesentlichen Ihre CSS dies:

body{font-family:"OpenSans", Helvetica, sans-serif} 
strong{font-weight:700} 
em{font-style:italic} 

dann einfach einen besseren Schrift Stapel bauen, der die Menge/Höhe der Deckung bietet, die Sie sich wünschen.