Согласно руководству по CSS для разработчиков Mozilla :
курсив: устанавливает текст, чтобы использовать курсив версию шрифта, если доступно ; если не доступно, вместо этого он будет имитировать курсив с косой.
oblique: Устанавливает текст для использования имитированной версии курсивного шрифта, созданного путем наклона обычной версии.
Отсюда мы делаем вывод, что если курсивная версия шрифта недоступна , курсив и наклонный ведут себя одинаково. Поскольку фрагмент кода W3Schools не указывает какой-либо конкретныйfont-family , я считаю, что используется шрифт по умолчанию; шрифт по умолчанию, который, вероятно, не имеет курсивной версии.
Но как сделать курсивную версию шрифта доступной?
Это означает, что у нас есть как минимум две версии одного и того же шрифта: «обычный» и курсивный. Они могут быть указаны в <style>разделе с @font-faceправилом. Пожалуйста , кратко следующим образом: developer.mozilla , w3schools , tympanus.net . Как видите, шрифт загружается в виде файла, который может иметь следующие расширения:eot, otf, woff, truetype .
До сих пор я нашел два способа связать файл шрифта
абсолютный URL файла шрифта: (фрагмент кода от tympanus.net )
`@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
src: local('Open Sans'), local('OpenSans'),
url (http://themes.googleusercontent.com/static/fonts/opensans/v8/cJZKeOuBrn4kERxqtaUH3T8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}
@font-face {
font-family: 'Open Sans';
font-style: italic;
font-weight: 400;
src: local('Open Sans Italic'), local('OpenSans-Italic'),
url
(http://themes.googleusercontent.com/static/fonts/opensans/v8/
xjAJXh38I15wypJXxuGMBobN6UDyHWBl620a-IRfuBk.woff)
format('woff');
}`
Обратите внимание, что в обоих случаях мы имеем font-family: 'Open Sans', что в основном определяет один и тот же шрифт; но в первом случае мы имеем font-style: normal;, а во втором случае имеем font-style: italic;. Также обратите внимание, что URL-адреса указывают на разные файлы. Теперь, возвращаясь к фрагменту кода w3schools, браузер может различать font-style: normalиfont-style: italic
используя относительный путь к файлу шрифта: (фрагмент кода от metaltoad.com )
Вместо того, чтобы определять отдельные значения семейства шрифтов для каждого шрифта, вы можете использовать одно и то же имя семейства шрифтов для каждого шрифта и определять подходящие стили, например, так:
`@font-face {
font-family: 'Ubuntu';
src: url('Ubuntu-R-webfont.eot');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'Ubuntu';
src: url('Ubuntu-I-webfont.eot');
font-weight: normal;
font-style: italic;
}`
В этом случае .eotфайлы должны храниться в той же папке, что и HTML-страница. Опять же, обратите внимание, что font-familyэто одно и то же, font-styleдругое и URL-адреса разные: Ubuntu- R -webfont против Ubuntu- I -webfont.
Пример курсивной версии шрифта:
ctan.org : это пример того, как предоставляются разные файлы для разных стилей / весов одного и того же шрифта. Ни полужирный, ни курсив не вычисляются на месте, они извлекаются из их конкретного файла.
