Определение CSS @ Font-Face жирным курсивом

Question

Я работаю над проектом, где я шесть весов/стилей шрифта, с которым я работаю. К ним относятся: регулярный, курсив, полужирный, полужирный курсив, жирный и полужирный курсив. У меня есть теги шрифта @ font-face (теоретически), как они должны отображаться. Однако в действительности происходит то, что жирный шрифт всегда выделен курсивом. Нужно ли вообще объявлять эти жирные + курсивные веса, чтобы они работали правильно? Я не хочу называть разные имена шрифтовых семей повсеместно. В идеале я должен просто иметь возможность объявить правильный вес и стиль и получить правильную версию шрифта.

@font-face { 
    font-family: 'AdobeGaramondPro'; 
    src: url('agaramondpro-bold-webfont.eot'); 
    src: url('agaramondpro-bold-webfont.eot?#iefix') format('embedded-opentype'), 
     url('agaramondpro-bold-webfont.woff') format('woff'), 
     url('agaramondpro-bold-webfont.ttf') format('truetype'); 
    font-weight: bold; 
    font-style: normal; 
    } 

    @font-face { 
    font-family: 'AdobeGaramondPro'; 
    src: url('agaramondpro-bolditalic-webfont.eot'); 
    src: url('agaramondpro-bolditalic-webfont.eot?#iefix') format('embedded-opentype'), 
     url('agaramondpro-bolditalic-webfont.woff') format('woff'), 
     url('agaramondpro-bolditalic-webfont.ttf') format('truetype'); 
    font-weight: bold; 
    font-style: italic, oblique; 
    } 

    @font-face { 
    font-family: 'AdobeGaramondPro'; 
    src: url('agaramondpro-italic-webfont.eot'); 
    src: url('agaramondpro-italic-webfont.eot?#iefix') format('embedded-opentype'), 
     url('agaramondpro-italic-webfont.woff') format('woff'), 
     url('agaramondpro-italic-webfont.ttf') format('truetype'); 
    font-weight: normal; 
    font-style: italic, oblique; 
    } 

    @font-face { 
    font-family: 'AdobeGaramondPro'; 
    src: url('agaramondpro-regular-webfont.eot'); 
    src: url('agaramondpro-regular-webfont.eot?#iefix') format('embedded-opentype'), 
     url('agaramondpro-regular-webfont.woff') format('woff'), 
     url('agaramondpro-regular-webfont.ttf') format('truetype'); 
    font-weight: normal; 
    font-style: normal; 
    } 

    @font-face { 
    font-family: 'AdobeGaramondPro'; 
    src: url('agaramondpro-semibold-webfont.eot'); 
    src: url('agaramondpro-semibold-webfont.eot?#iefix') format('embedded-opentype'), 
     url('agaramondpro-semibold-webfont.woff') format('woff'), 
     url('agaramondpro-semibold-webfont.ttf') format('truetype'); 
    font-weight: 600; 
    font-style: normal; 
    } 

    @font-face { 
    font-family: 'AdobeGaramondPro'; 
    src: url('agaramondpro-semibolditalic-webfont.eot'); 
    src: url('agaramondpro-semibolditalic-webfont.eot?#iefix') format('embedded-opentype'), 
     url('agaramondpro-semibolditalic-webfont.woff') format('woff'), 
     url('agaramondpro-semibolditalic-webfont.ttf') format('truetype'); 
    font-weight: 600; 
    font-style: italic, oblique; 
    } 

Любые идеи для этой работы?

Answer 1

Вы можете использовать что-то вроде этого p.normal {font-style:normal} p.italic {font-style:italic} p.oblique {font-style:oblique} для объявления шрифта с классом параграфа. Или что-то вроде h1, h2, h3, h4, h5, #headline a { color:#FF9900; }

Answer 2

Это, вероятно, не технический ответ, который вы ищете точно, но зачем вам использовать три веса (reg, полужирный и полужирный, оставьте в курсе выделено курсивом)?

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

В шрифты с широким диапазоном весов могут входить следующие шрифты: Hairline; Тонкий; Легкий; Регулярное; Средний; Полужирный; Жирный; Черный; Тяжелые (с курсивом). Крайние концы этого спектра никогда не должны использоваться для установки длинных блоков текста, но только в больших размерах экрана или заголовках верхнего уровня. Затем вы выбираете два веса между, скажем, светлыми и полужидкими позициями для основного текста основного текста, в большинстве случаев выбирая веса по меньшей мере в двух положениях - Light и Medium, или Regular и Bold - чтобы получить достаточный контраст. Слишком большой контраст был бы разрушительным для погружения в чтение; например, не соединяйте свет с полужирным шрифтом.

Если вам нужен дополнительный промежуточный вес для специального назначения (например, у вас может быть белый текст, установленный на темном фоне, поэтому полужирный будет хорошим), тогда вы можете создать отдельный класс для этого случая а стиль - связывание четырех обычных весов и курсива в декларации шрифтовых семейств как обычно.

Answer 3

Возможно, я ошибаюсь, но, кажется, я помню, что читал, что для работы с IE8 вам нужно называть имена шрифтов повсюду (это то, чего вы не хотели делать). Поэтому в каждой декларации шрифта вы должны указать «font-style: normal», а также для. Это очень раздражает, как будто шрифт не работает по какой-либо причине, вы получаете шрифт системы «обычного» стиля даже для жирного и курсивного. Извините, что я не могу вспомнить, где бы я это читал!