Schriftstil: kursiv oder schräg in CSS

Was ist der Unterschied zwischen diesen beiden:

font-style:italic
font-style:oblique

Ich habe versucht, den W3Schools-Editor zu verwenden , konnte aber keinen Unterschied feststellen.

Was vermisse ich?

Im reinsten Sinne (Schriftdesigner) ist eine schräge Schrift eine römische Schrift, die um eine bestimmte Anzahl von Grad (normalerweise 8-12 Grad) verzerrt wurde. Der Schriftdesigner erstellt eine Kursivschrift mit bestimmten Zeichen (insbesondere Kleinbuchstaben a), die unterschiedlich gezeichnet sind, um eine kalligraphischere sowie eine schräge Version zu erstellen.

Einige Typgießereien haben willkürlich Schrägen erstellt, die nicht unbedingt von den Designern selbst genehmigt wurden. Einige Schriftarten sollten nicht kursiv oder schräg gestellt werden. Aber die Leute haben es trotzdem getan. Und wie Sie vielleicht wissen, verzerren einige Betriebssysteme beim Klicken auf das kursive Symbol die Schriftart und erstellen im Handumdrehen eine Schräge. Kein angenehmer Anblick.

Es ist am besten, eine Kursivschrift nur dann anzugeben, wenn Sie sicher sind, dass die Schriftart mit einer kursiv gestaltet wurde.

Im Allgemeinen ist eine Kursivschrift eine spezielle Version der Schriftart, während eine schräge Version nur die reguläre Version ist, die etwas geneigt ist. Beide sind also schräg und beziehen sich auf die normale Schriftart, aber in Kursivschrift werden spezielle Buchstabenformen speziell dafür erstellt.

Die meisten Schriftarten sind entweder kursiv oder schräg. Ich habe noch nie einen gesehen, der beides hat. (Wenn Sie eine kursive Version haben, warum sollten Sie sich dann mit einer schrägen Version beschäftigen?)

Der schräge Typ (oder schräg, geneigt) ist eine Form des Typs, die leicht nach rechts geneigt ist und auf die gleiche Weise wie der kursive Typ verwendet wird. Im Gegensatz zur Kursivschrift werden jedoch keine unterschiedlichen Glyphenformen verwendet. Es werden die gleichen Glyphen wie beim römischen Typ verwendet, außer dass sie verzerrt sind.

Weitere Lesung: CSS-Schriftstil schräg gegen kursiv

Wie bei Kursiv und Schräg ist der gleiche Unterschied sichtbar, wenn Kursiv mit Faux-Kursiv verglichen wird .

Sie werden Faux-Kursivschrift überall dort sehen, wo eine normale Schriftart verzerrt ist, font-style: italic;während eine echte Kursivschrift so konzipiert ist, dass sie schräg steht.

Der untere Teil der beiden Felder zeigt den Unterschied deutlich.

Siehe Beispiel

Laut Mozilla-Entwickler CSS Tutorial :

kursiv: Legt fest, dass der Text die kursive Version der Schriftart verwendet, sofern verfügbar . Wenn nicht verfügbar, wird stattdessen Kursivschrift mit Schrägstellung simuliert.

schräg: Legt fest, dass der Text eine simulierte Version einer kursiven Schrift verwendet, die durch Schrägen der normalen Version erstellt wird.

Daraus schließen wir, dass sich sowohl kursiv als auch schräg das gleiche Verhalten verhält , wenn keine kursive Version der Schrift verfügbar ist . Da das W3Schools-Codefragment keine bestimmten Angaben macht , wird meines Erachtens eine Standardschriftart verwendet. Eine Standardschriftart, die wahrscheinlich keine kursive Version hat.font-family

Aber wie stellt man eine kursive Version der Schrift zur Verfügung?

Dies bedeutet, dass wir mindestens zwei Versionen derselben Schriftart haben, eine "normale" und eine kursive. Diese können im <style>Abschnitt mit der @font-faceRegel angegeben werden. Bitte lesen Sie kurz: developer.mozilla , w3schools , tympanus.net . Wie Sie sehen können, wird die Schriftart als Datei geladen, die die folgenden Erweiterungen haben kann : eot, otf, woff, truetype.

Bisher habe ich zwei Möglichkeiten gefunden, die Schriftartdatei zu verknüpfen

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