Według samouczka CSS dla programistów mozilla :
kursywa: Ustawia tekst tak, aby używał wersji kursywy, jeśli jest dostępna ; jeśli nie jest dostępna, będzie symulować kursywę ukośną.
oblique: Ustawia tekst tak, aby używał symulowanej wersji czcionki kursywy, utworzonej przez nachylenie normalnej wersji.
Stąd wywnioskujemy, że jeśli kursywa wersja czcionki nie jest dostępna , zarówno kursywa , jak i ukośne zachowują się w ten sam sposób. Ponieważ fragment kodu W3Schools nie określa żadnego konkretnego font-family, uważam, że użyto domyślnej czcionki; domyślna czcionka, która prawdopodobnie nie ma wersji kursywowej.
Ale jak udostępnić kursywą wersję czcionki?
Oznacza to, że mamy co najmniej dwie wersje tej samej czcionki, „zwykłą” i kursywę. Można je określić w <style>sekcji z @font-faceregułą. Proszę przeczytać krótko: developer.mozilla , w3schools , tympanus.net . Jak widać, czcionka jest ładowany jako plik, który może mieć następujące rozszerzenia: eot, otf, woff, truetype.
Do tej pory znalazłem dwa sposoby łączenia pliku czcionek
bezwzględny adres URL pliku czcionki: (fragment kodu z 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');
}`
Zauważ, że w obu przypadkach mamy font-family: 'Open Sans', która w zasadzie definiuje tę samą czcionkę; ale w pierwszym przypadku mamy font-style: normal;, podczas gdy w drugim przypadku mamy font-style: italic;. Pamiętaj też, że adresy URL wskazują różne pliki. Wracając do fragmentu kodu w3schools, w ten sposób przeglądarka może rozróżnić między font-style: normalifont-style: italic
przy użyciu ścieżki względnej do pliku czcionek: (fragment kodu z metaltoad.com )
Zamiast definiować osobne wartości rodziny czcionek dla każdej czcionki, możesz użyć tej samej nazwy rodziny czcionek dla każdej czcionki i zdefiniować pasujące style, na przykład:
`@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;
}`
W takim przypadku .eotpliki muszą być przechowywane w tym samym folderze, co strona HTML. Ponownie zauważ, że font-familyto samo jest takie samo, font-stylejest inne, a także adresy URL są różne: Ubuntu- R -webfont vs Ubuntu- I -webfont.
Przykład kursywy w wersji czcionki:
ctan.org : jest to przykład dostarczania różnych plików dla różnych stylów / gramatur tej samej czcionki. Ani pogrubienie, ani kursywą nie są obliczane na miejscu, są one pobierane z określonego pliku.
