@ font-face с несколькими файлами выглядит по-разному в Firefox и Chrome

У меня есть css для Custom Arial шрифта для стиля regular, bold, italic and bold-italic.

И для этого создаются все разные файлы шрифтов arial_mt_stdregular, arial_mt_stdbold, arial_mt_stditalic и arial_mt_stdbold_italic.

#span{
    font-family: 'arial_mt_stditalic';
    font-style: italic;
    font-size: 30px;
}

В Firefox это применяет курсив дважды, как в Chrome и IE.

Таким образом, мой контент выглядит в FireFox вдвое курсивом и вдвое полужирным шрифтом, чем в Chrome и IE.

@font-face {
    font-family: 'arial_mt_stdregular';
    src: url('arialmtstd-webfont.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}


@font-face {
    font-family: 'arial_mt_stdbold';
    src: url('arialmtstd-bold-webfont.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
 }


@font-face {
    font-family: 'arial_mt_stditalic';
    src: url('arialmtstd-italic-webfont.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'arial_mt_stdbold_italic';
    src: url('arialmtstd-bolditalic-webfont.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

образец из FF и Chrome

Почему в Chrome и IE не применяется font-style: курсив для шрифта "arial_mt_stditalic"?


html fonts css webfonts font-face
person yogen darji    schedule 07.07.2017    source источник

Ответы (1)


arrow_upward
1
arrow_downward

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

При применении шрифта у вас есть:

font-family: 'arial_mt_stditalic';
font-style: italic;

Но в сингле @font-face для rial_mt_stditalic у вас есть

font-style: normal;

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

Все определения @font-face должны иметь одинаковое значение для font-family, а другие свойства затем сообщают браузеру, какой вариант, вес и т. Д. Это конкретная загрузка.

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

Т.е. у тебя должно быть:

#span{
    font-family: 'arial mt';
    font-style: italic;
    font-size: 30px;
}

@font-face {
    font-family: 'arial mt';
    src: url('arialmtstd-webfont.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}


@font-face {
    font-family: 'arial mt';
    src: url('arialmtstd-bold-webfont.woff2') format('woff2');
    font-weight: bold;
    font-style: normal;
 }


@font-face {
    font-family: 'arial mt';
    src: url('arialmtstd-italic-webfont.woff2') format('woff2');
    font-weight: normal;
    font-style: italic;
}

// etc.
person Richard    schedule 07.07.2017
comment
Но я изменил некоторые шрифты в версии курсивом, поэтому я должен установить другое семейство шрифтов arial_mt_stditalic в соответствии с моими требованиями. Как Chrome не удваивает эффект полужирного или курсивного начертания, в отличие от Firefox? Что можно сделать без изменения CSS семейства шрифтов? - person yogen darji; 10.07.2017
comment
@yogendarji Как браузеры обрабатывают не найденный шрифт (в случае вопроса: курсивная версия arial_mt_stditalic: браузер не анализирует имя) зависит от браузера. - person Richard; 10.07.2017
comment
@yogendarji Это не проблема. То же решение работает. Он сообщает браузеру использовать определенный файл для версии, выделенной курсивом. То, что файл является измененным из оригинала шрифтовых дизайнеров, обрабатывается. - person Richard; 10.07.2017