Как вы устанавливаете стеки веб-шрифтов с несколькими стилями?

Question

веб-шрифты, как правило, приходят разделить на отдельные файлы для полужирный, курсив и т.д. Я использую @font-face заявления, как это (обрезанные до WOFF только для этого примера):

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

А потом я реализую различные стили:

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

Я должен переопределить жирный/курсив стиль ПАгент (комментируемая линию выше). В противном случае он добавит искусственный смелый/курсивный текст к тексту, который очень уродлив.

Если бы я оставил его таким образом, и один из файлов шрифтов в Интернете не смог загрузить, тогда резервный шрифт не имел бы надлежащего стиля. Например, это:

<strong>This text is bold</strong> 

будет отображаться как Helvetica регулярным, если OpenSans-Bold.woff не удалось загрузить, но я хочу, чтобы это было Helvetica жирным шрифтом.

Как вы гарантируете, что ваши резервные шрифты получат правильный жирный/курсивный/регулярный стиль?

Answer 1

Вы хотите совместить свои правила @ font-face ..... только объявить одно имя семейства шрифтов и объявить веса как ваши переменные, такие как жирный, курсивный и т. Д. В приведенном ниже примере показано, как использовать Open Sans Regular с Open Sans Жирный:

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

если вы знакомы трейлерах @ шрифта лицо правило, его так легко ... только различия в этих двух правил выше является URL (s) и начертание шрифта , поэтому для курсива, измените url, чтобы указать на курсивный шрифт, а затем измените стиль на font-style:italic.

есть куча преимуществ, которые вы получаете от этого, в том числе меньше переписывания, потому что вам не придется обновлять каждый шрифт ... вы только объявляете его один раз.

но, что существенно снижает CSS к этому:

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

затем просто построить лучший стек шрифта, который обеспечивает количество/уровень охвата, что вы хотите.