Schriftstil | CSS-Tricks

Die Eigenschaft font-style ermöglicht es Ihnen, Text kursiv erscheinen zu lassen (d. h. schräg oder geneigt).

em {
  font-style: italic;
}

Diese Eigenschaft akzeptiert einen von drei möglichen Werten: normal, italic und oblique.

Wenn eine gegebene Schriftfamilie eine eingebettete kursive oder schräge Schriftart hat, wählt der Browser diese aus. Wenn keine kursive oder schräge Schriftart verfügbar ist, wird der Schräg-Effekt vom Browser nachgeahmt. Wenn italic definiert ist und keine kursive Schriftart verfügbar ist, sucht der Browser zuerst nach einer schrägen Schriftart, bevor er versucht, die kursive Schriftart nachzuahmen. Das Gleiche gilt für oblique; auch diese sucht zuerst nach einer kursiven Schriftart.

Um zu verhindern, dass der Browser eine nachgeahmte oder synthetisierte Version der kursiven oder schrägen Schriftart hinzufügt, können Sie die Eigenschaft font-synthesis verwenden (sofern unterstützt).

Kursiv vs. Schräg

Laut Spezifikation sind „kursive Formen im Allgemeinen von eher geschwungener Natur, während schräge Schriftarten typischerweise geneigte Versionen der regulären Schriftart sind.“ Wenn die verwendete Schrift jedoch keine kursiven oder schrägen Schriftarten hat, gibt es in den meisten Fällen wenig bis gar keinen Unterschied zwischen kursiv und schräg.

Die folgende Demo demonstriert sowohl kursiv als auch schräg

Siehe den Pen Italic vs. oblique with CSS font-style von CSS-Tricks (@css-tricks) auf CodePen.

Weitere Ressourcen

Browser-Unterstützung

Chrome	Safari	Firefox	Opera	IE	Android	iOS
Funktioniert	Funktioniert	Funktioniert	Funktioniert	Funktioniert	Funktioniert	Funktioniert

Kommentare

Chase Dickinson

# 14. November 2014

Hallo, mein Kursivschrift funktioniert nicht für externe CSS,
Stylesheet

body{
background-color: #FF0099;

p.normal {
    font-style: normal;

}

p.italic {
    font-style: italic;
}

p.oblique {
    font-style: oblique;
}

Meine Website

3 movies
Tommy Boy with Chris Farley, Anchorman: the Legend of Ron Burgundy, with Will Ferral, and Dumb and Dumber, with Jim Carrey




 Tommy Boy is about, his dad's (Who died) business Callahan Auto parts is going out of busniess and Tommy is trying to save the business and sells Zalinski buys 500,000 break-pads to keep in business. Directored by Peter Segal. I would give this movie a 10 out of 10. Due to Chrisa Farley and his comedy in this movie is genuis.

 Anchorman is about Rob and his News Team. There is a girl journalist and she is trying to take Rob's job and Rob ends up getting fired. She becomes Anchor. In the end They co-anchor each other in the News for the World. Directored by Adam McKay. I would rate this movie a 9 out of 10 due to Will fereel going over the top. It ain't a 10 because Steve Caroll gets a gernade. That is dangerous.

 Dumb and Dumber is about Lloyd is trying to find the girl of his dreams because she left a brief case behind. Directored by Peter Farrelly and Bobby Farrelly. I would rate my movie a 9 out of 10 due to Jim Carrey and Jeff Daniels going out and trying to be kids again. It isn't a 10 due to the fact that it is really dumb.

Was soll ich tun?
Meine E-Mail
[email protected]

Antworten

Kieran

# 6. Dezember 2014

Deinem body-Tag fehlen seine schließenden Klammern. Versuche

body{
    background-color: #FF0099;
}

p.normal {
    font-style: normal;
}

p.italic {
    font-style: italic;
}

p.oblique {
    font-style: oblique;
}

Geej Mauriva

# 7. August 2015

Hallo,
Ich habe diesen Code eingefügt
em {
font-style: italic;
}

in mein externes CSS-Stylesheet auf meiner Website hier: http://alaskahealer.com/services/

Hier ist das HTML auf der Seite: Keine Drop-ins. Nur nach Vereinbarung.
Es wird in Safari und IE 11 nicht kursiv angezeigt

Code Pen: http://codepen.io/anon/pen/rVRVQm

Weißt du warum?

Geej

Antworten

Louis

Permalink zum Kommentar# 7. August 2015
Hallo Geej,

Der Grund dafür ist, dass du eine Schriftart namens „Muli“ verwendest, die diese ist

http://www.fontsquirrel.com/fonts/muli

Das ist nur die reguläre Muli-Schriftart. Sie scheint keine kursive Version zu haben, es ist nur die reguläre. Wenn Sie das CSS wie folgt ändern, wird es funktionieren
```
em {
    font-style: italic;
    font-family: "muli italic", sans-serif;
}
```
Oder jede andere Möglichkeit, die „Muli kursiv“-Version der Schriftart einzubinden.

Margaret Munnelly

# 22. Mai 2016

Ich kann meine E-Mail-Schriftart nicht ändern – sie wird fett.

Antworten

posthumanist

# 3. Februar 2018

Hallo Louis! Ich möchte Menlo für den normalen Absatztext verwenden, aber eine andere Schriftart (Arial) für kursiven Text und H1, H2 usw. Aber ich kann den Code irgendwie nicht herausfinden. Kannst du mir weiterhelfen??
Vielen Dank
johannes

Antworten

Louis Lazaris

Permalink zum Kommentar# 4. Februar 2018
Das musst du in deinem CSS definieren.
```
p {
  font-family: Menlo, sans-serif;
}

h1, h2, em {
  font-family: Arial, sans-serif;
}
```
Das ist eine Möglichkeit, es zu tun, aber es hängt auch davon ab, was sich sonst noch in deinem Stylesheet befindet.

posthumanist

# 4. Februar 2018

Danke, Louis!

Antworten

Schriftstil

# 12. Juli 2018

Wenn ich in meinem WordPress-Theme-CSS verwende, wird es immer fett. Habe auch !Important versucht. Aber immer noch dasselbe. Hat jemand eine Idee? Es ist nicht das Haupt-CSS.

Antworten

Kursiv vs. Schräg

Verwandte Eigenschaften

Weitere Ressourcen

Browser-Unterstützung

Kommentare

Hinterlasse eine Antwort Antwort abbrechen