styl czcionki: kursywa vs ukośne w CSS

209

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?

rajakvk
źródło
17
Wiadomość z przyszłości: Wikipedia ma bardzo ładny przykład pokazujący różnicę między kursywą a ukośnym .
Cornstalks
Późniejsze pytanie kontrolne (a może powinno przejść do UX?): Jaki wolud może być rzeczywistym przypadkiem użycia do konkretnego wyboru skośnego wariantu? Czy wariant kursywy nie zawsze jest „preferowany”?
KlaymenDK
1
@KlaymenDK: Wprawdzie jest to wąski przypadek użycia, ale mogę sobie wyobrazić preferowanie skośnej czcionki dla czytelności w niektórych małych rozmiarach czcionek na pikselowanych wyjściach: Przykład: użycie czcionki od 6 do 8 punktów na małym ekranie o niewielkich rozmiarach; niektóre kursywa mają cieńsze kreski i więcej ozdób, które mogą zmniejszać czytelność w porównaniu do zwykłego „skosu”.
Dan H

Odpowiedzi:

268

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.

jcburns
źródło
37
Warto zauważyć, że prawie żadna rodzina czcionek na wolności nie określa zarówno czcionek pochylonych, jak i ukośnych, a większość silników renderujących dostarczy drugą ścianę, jeśli określona czcionka jest niedostępna dla tej czcionki.
SingleNegationElimination
7
Ta odpowiedź nie uwzględnia różnic funkcjonalnych, wzajemnej wyłączności ani różnic semantycznych.
ahnbizcad
2
Na przykład w przypadku czcionek cyrylicy znaki kursywy często będą się bardzo różnić, znacznie bardziej niż forma kursywy, forma ukośna będzie po prostu ukośna.
Moody_Mudskipper
1
Co powinien zrobić silnik renderujący, jeśli powiem „kursywa”, ale dostępna jest tylko „skośna” wersja czcionki? Lub odwrotnie?
Michael
@SingleNegationElimination Twój komentarz powinien być odpowiedzią, ponieważ odnosi się do prawdziwej techniki w miejscu, w szczególności w przypadku CSS. Wybrana tutaj „odpowiedź” dotyczy bardziej typografii.
Vun-Hugh Vaw
72

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ą?)

Anthony Mills
źródło
21

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

Zubair1
źródło
16

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.

wprowadź opis zdjęcia tutaj

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

Zobacz przykład

robstarbuck
źródło
2
Masz na myśli skośne równe faux-kursywa?
zwcloud
Tak, jeśli nie jest dostępna ani czcionka ukośna, ani kursywą, wyniki będą wyglądały tak samo (przynajmniej w tym przykładzie w chrome) next.plnkr.co/edit/SpaDzXmSb1oADxUfKVg1?preview
robstarbuck 12.08.18
NIE Mógłbym zrobić tej odpowiedzi bez pomocy wizualnej, dzięki
Max Alexander Hanna
0

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.

  • ocierać kojota
    źródło
    moja odpowiedź dotyczy drugiej części pytania: „... ale nie byłem w stanie powiedzieć różnicy. Czego mi brakuje?”
    wile kojot