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
absolute URL der Schriftartdatei: (Code-Snippet von 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');
}`
Bitte beachten Sie, dass wir in beiden Fällen font-family: 'Open Sans'die gleiche Schriftart definieren. aber im ersten Fall haben wir font-style: normal;, während wir im zweiten Fall haben font-style: italic;. Beachten Sie auch, dass die URLs auf verschiedene Dateien verweisen. Zurück zum Code-Snippet von w3schools: So kann der Browser zwischen font-style: normalund unterscheidenfont-style: italic
Verwenden des relativen Pfads zur Schriftartdatei: ( Codeausschnitt von metaltoad.com )
Anstatt separate Schriftfamilienwerte für jede Schriftart zu definieren, können Sie für jede Schriftart denselben Schriftfamiliennamen verwenden und die passenden Stile wie folgt definieren:
`@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;
}`
In diesem Fall müssen die .eotDateien im selben Ordner wie die HTML-Seite gespeichert werden. Beachten Sie erneut, dass das font-familygleiche ist, das font-styleanders ist und auch die URLs unterschiedlich sind: Ubuntu- R- Webfont vs Ubuntu- I- Webfont.
Beispiel einer kursiven Version der Schriftart:
ctan.org : Dies ist ein Beispiel dafür, wie verschiedene Dateien für verschiedene Stile / Gewichte derselben Schriftart bereitgestellt werden. Weder fett noch kursiv werden vor Ort berechnet, sie werden aus ihrer spezifischen Datei abgerufen.
