Згідно з підручником CSS для розробника mozilla :
курсив: Встановлює текст для використання курсивної версії шрифту, якщо вона є ; якщо він недоступний, він замість цього буде імітувати курсив косим.
косий: Встановлює текст для використання змодельованої версії курсивного шрифту, створеного косою звичайною версією.
Звідси ми робимо висновок, що якщо курсивна версія шрифту недоступна , курсив та косий ведуть себе однаково. Оскільки в фрагменті коду 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 : це приклад того, як надаються різні файли для різних стилів / ваг одного і того ж шрифту. Ні жирним шрифтом, ні курсивом не обчислюються на місці, вони витягуються з конкретного файлу.
