styl czcionki: kursywa vs ukośne w CSS

Jaka jest różnica między tymi dwoma:

font-style:italic
font-style:oblique

Próbowałem użyć edytora W3Schools, ale nie byłem w stanie odróżnić.

czego mi brakuje?

W najczystszym sensie (typ projektanta), ukośna jest czcionką rzymską, która została wypaczona o pewną liczbę stopni (zwykle 8-12 stopni). Kursywa jest tworzona przez projektanta tekstu z określonymi znakami (zwłaszcza małymi literami a) narysowanymi inaczej, aby stworzyć bardziej kaligraficzną, a także pochyloną wersję.

Niektóre odlewnie stworzyły dowolnie ukośne elementy, które niekoniecznie zostały zatwierdzone przez samych projektantów ... niektóre czcionki nie miały być pisane kursywą ani skośne ... ale ludzie i tak to robili. I jak zapewne wiesz, niektóre systemy operacyjne, po kliknięciu ikony kursywy, przekrzywiają czcionkę i tworzą ukośne w locie. Niezbyt przyjemny widok.

Najlepiej jest podać kursywę tylko wtedy, gdy masz pewność, że czcionka została z nią zaprojektowana.

Zazwyczaj kursywą jest specjalna wersja czcionki, podczas gdy wersja ukośna jest tylko zwykłą wersją pochyloną. Oba są więc pochylone i powiązane ze zwykłą czcionką, ale kursywą będą specjalne specjalne litery.

Większość czcionek ma wersję kursywą lub skośną; Nigdy nie widziałem takiego, który ma oba. (Jeśli masz wersję kursywą, po co zawracać sobie głowę wersją ukośną?)

Typ skośny (lub pochylony, pochylony) to rodzaj tekstu, który jest lekko pochylony w prawo, używany w taki sam sposób, jak kursywą. Jednak w przeciwieństwie do kursywy, nie używa różnych kształtów glifów; używa tych samych glifów co typ rzymski, z wyjątkiem zniekształconych.

Dalsze czytanie: styl czcionki css ukośny vs kursywa

Podobnie jak w przypadku kursywy i ukośnego , ta sama różnica jest widoczna podczas porównywania kursywy z faux kursywą .

Faux-kursywa będzie widoczna wszędzie tam, gdzie normalna czcionka jest pochylona, font-style: italic;podczas gdy prawdziwa kursywa jest zaprojektowana tak, aby była pochylona.

Dół dwóch liter wyraźnie pokazuje różnicę.

Zobacz przykład

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

`@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-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;
}`