CSS-Schriftstil

Inhaltsverzeichnis

    Inhaltsverzeichnis anzeigen

Schriftstil

Die Eigenschaft font-style wird hauptsächlich zur Angabe von kursivem Text verwendet.

Diese Eigenschaft hat drei Werte:

  • normal - Der Text wird normal angezeigt

  • kursiv - Der Text wird kursiv dargestellt

  • oblique - Der Text ist „schief“ (schräg ist kursiv sehr ähnlich, wird aber weniger unterstützt)

Beispiel

p.normal {
  font-style: normal;
}

p.italic {
  font-style: italic;
}

p.oblique {
  font-style: oblique;
}

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<head>
<style>
p.normal {
  font-style: normal;
}

p.italic {
  font-style: italic;
}

p.oblique {
  font-style: oblique;
}
</style>
</head>
<body>

<h1>The font-style property</h1>

<p class="normal">This is a paragraph in normal style.</p>
<p class="italic">This is a paragraph in italic style.</p>
<p class="oblique">This is a paragraph in oblique style.</p>

</body>
</html>

Schriftstärke

Die Eigenschaft font-weight gibt die Stärke einer Schriftart an:

Beispiel

p.normal {
  font-weight: normal;
}

p.thick {
  font-weight: bold;
}

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<head>
<style>
p.normal {
  font-weight: normal;
}

p.light {
  font-weight: lighter;
}

p.thick {
  font-weight: bold;
}

p.thicker {
  font-weight: 900;
}
</style>
</head>
<body>

<h1>The font-weight property</h1>

<p class="normal">This is a paragraph.</p>
<p class="light">This is a paragraph.</p>
<p class="thick">This is a paragraph.</p>
<p class="thicker">This is a paragraph.</p>

</body>
</html>

Schriftartvariante

Die Eigenschaft font-variant gibt an, ob ein Text angezeigt werden soll oder nicht in Kapitälchenschrift angezeigt werden.

Bei einer Kapitälchenschrift werden alle Kleinbuchstaben in Großbuchstaben umgewandelt Briefe. Allerdings werden die umgewandelten Großbuchstaben in einer kleineren Schriftgröße angezeigt als die ursprünglichen Großbuchstaben im Text.

Beispiel

p.normal {
  font-variant: normal;
}

p.small {
  font-variant: small-caps;
}

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<head>
<style>
p.normal {
  font-variant: normal;
}

p.small {
  font-variant: small-caps;
}
</style>
</head>
<body>

<h1>The font-variant property</h1>

<p class="normal">My name is Hege Refsnes.</p>
<p class="small">My name is Hege Refsnes.</p>

</body>
</html>