@ шрифт-лицо не работает должным образом для курсивного/жирного шрифта

Question

Я использую инструмент для автоматической генерации CSS, и он генерирует следующий @ шрифт лицу тег и соответствующего стиль абзаца

@font-face { 
    font-family:FF-Garamond-Italic; 
    src:url("../fonts/16309_GARAIT (1).ttf"); 
    font-style:italic; 
} 

p.autoParaStyle3 { 
    font-family:FF-Garamond-Italic; 
    font-size:32px; 
    line-height:40px; 
    color:#000; 
    text-align:justify; 
} 

Извещение, что указанный шрифт уже является курсивной версией шрифта Garamond, а технически строка font-style:italic является избыточной.

Однако, как есть, это не сработает (я попробовал в FF, Chrome & Safari) и в конечном итоге использует системный шрифт по умолчанию. Если вручную удалить строку font-style:italic, текст будет правильно отображаться в шрифте Garamond Italic, как и ожидалось.

Итак, у меня есть 2 вопроса

1. Почему это не работает, то есть почему имея font-style:italic причина не работать?

2. Есть ли способ «переопределить» определение @ font-face для использования font-style:normal через javascript?
   Причина, по которой я спрашиваю, заключается в том, что я не управляю инструментом, который генерирует CSS выше, поэтому не может касаться этого файла.
   Кроме того, я попытался создать новый @ font-face в javascript с тем же именем, но я не хочу снова указывать «src» в index.html, так как этот файл и файл css далее обрабатываются в разных местах - так что я хочу, чтобы «src» был относительно только css-файла и выбирался из него.

Заранее благодарен!

Answer 1

Установка font-style:italic не является избыточной. Он указывает, что шрифт является курсивным, и это означает, что он будет считаться совпадением, если шрифт элемента был установлен на курсив, так как он по умолчанию, например. для i и cite элементов.

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

Чтобы решить эту проблему, добавьте font-style: italic в правила для p.autoParaStyle3.

Ответ на вопрос 2 заключается в том, что это зависит от места правила @font-face в DOM. Например, если он находится в элементе style, вы можете изменить его содержимое с помощью JavaScript. Однако вам не нужно задавать этот вопрос.

(Имея целый абзац, отображаемый в Курсиве типографским сомнителен Вы можете быть решение проблемы неправильно.).