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

Я работаю над проектом, в котором я использую шесть начертаний / стилей шрифта, с которым я работаю. К ним относятся: обычный, курсив, полужирный курсив, полужирный курсив, полужирный и полужирный курсив. У меня есть настройки тегов @ 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;
    }

Есть идеи, как заставить это работать?


css typography font-face
person user1296965    schedule 15.05.2012    source источник

Ответы (3)


arrow_upward
1
arrow_downward

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

person Red dwarf    schedule 15.05.2012

arrow_upward
1
arrow_downward

Вероятно, это не технический ответ, который вы точно ищете, но зачем вам использовать три веса (рег., Полужирный и полужирный, оставьте пока курсив в стороне)?

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

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

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

person Anthony    schedule 16.05.2012
comment
На самом деле, Энтони, это не тот ответ, который я искал, но он правильный. При просмотре моих мокапов в фотошопе в любом случае используются только полужирный шрифт и нормальный и нормальный курсив, так что этот вопрос стал спорным. Мне все еще любопытно, есть ли способ заставить все 6 стилей работать должным образом. P.S. похоже, что в Safari он работает правильно, но не в Chrome. Вот и все, что нужно для совместного использования движка WebKit. - person user1296965; 16.05.2012
comment
Я разобрался, вы должны перечислить их в таком порядке: нормальный, нормальный курсив, полужирный, полужирный курсив, полужирный, полужирный курсив. Если вы сначала установите курсив, это будет лучше в процессе наследования. - person user1296965; 16.05.2012

arrow_upward
0
arrow_downward

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

person user1010892    schedule 02.08.2013