Die CSS-Eigenschaft „Font“ wird verwendet, um das Aussehen von Texten zu steuern. Mithilfe der CSS-Schriftarteneigenschaft können Sie Textgröße, Farbe, Stil und mehr ändern. Sie haben bereits gelernt, wie Sie Text fett oder unterstrichen machen. Hier erfahren Sie auch, wie Sie die Größe Ihrer Schriftart prozentual ändern können.
Dies sind einige wichtige Schriftattribute:
1) CSS-Schriftfarbe
Die CSS-Schriftfarbe ist ein eigenständiges Attribut in CSS, obwohl es den Anschein hat, dass es Teil von CSS-Schriftarten ist. Es wird verwendet, um die Farbe des Textes zu ändern.
Es gibt drei verschiedene Formate zum Definieren einer Farbe:
- Durch einen Farbnamen
- Nach Hexadezimalwert
- Durch RGB
Im obigen Beispiel haben wir alle diese Formate definiert.
body { font-size: 100%; } h1 { color: red; } h2 { color: #9000A1; } p { color:rgb(0, 220, 98); } } <h2>This heading is shown in serif.</h2> <p>This paragraph is written in monospace.</p> Testen Sie es jetzt Ausgabe:
<h2>This heading is shown in sans-serif.</h2> <h3>This heading is shown in serif.</h3> <p>This paragraph is written in monospace.</p>
3) CSS-Schriftgröße
Die CSS-Eigenschaft „Schriftgröße“ wird verwendet, um die Größe der Schriftart zu ändern.
Dies sind die möglichen Werte, mit denen Sie die Schriftgröße festlegen können:
| Wert für die Schriftgröße | Beschreibung |
|---|---|
| xx-klein | Wird verwendet, um die extrem kleine Textgröße anzuzeigen. |
| x-klein | Wird verwendet, um die extra kleine Textgröße anzuzeigen. |
| klein | Wird verwendet, um kleine Textgrößen anzuzeigen. |
| Mittel | Wird zur Anzeige mittlerer Textgröße verwendet. |
| groß | Wird verwendet, um große Textgrößen anzuzeigen. |
| x-groß | Wird verwendet, um besonders großen Text anzuzeigen. |
| xx-groß | Wird verwendet, um extrem große Textgrößen anzuzeigen. |
| kleiner | Wird verwendet, um vergleichsweise kleinere Textgrößen anzuzeigen. |
| größer | Wird verwendet, um eine vergleichsweise größere Textgröße anzuzeigen. |
| Größe in Pixel oder % | Wird verwendet, um den Wert in Prozent oder in Pixeln festzulegen. |
Practice CSS font-size property <p> This font size is extremely small.</p> <p> This font size is extra small</p> <p> This font size is small</p> <p> This font size is medium. </p> <p> This font size is large. </p> <p> This font size is extra large. </p> <p> This font size is extremely large. </p> <p> This font size is smaller. </p> <p> This font size is larger. </p> <p> This font size is set on 200%. </p> <p> This font size is 20 pixels. </p>Testen Sie es jetzt
Ausgabe:
Diese Schriftgröße ist extrem klein.
Diese Schriftgröße ist extra klein
Diese Schriftgröße ist klein
Diese Schriftgröße ist mittel.
Diese Schriftgröße ist groß.
Diese Schriftgröße ist extra groß.
Diese Schriftgröße ist extrem groß.
Diese Schriftgröße ist kleiner.
Diese Schriftgröße ist größer.
Diese Schriftgröße ist auf 200 % eingestellt.
Diese Schriftgröße beträgt 20 Pixel.
4) CSS-Schriftstil
Die CSS-Eigenschaft „Schriftstil“ definiert, welche Art von Schriftart Sie anzeigen möchten. Es kann kursiv, schräg oder normal sein.
body { font-size: 100%; } h2 { font-style: italic; } h3 { font-style: oblique; } h4 { font-style: normal; } } <h2>This heading is shown in italic font.</h2> <h3>This heading is shown in oblique font.</h3> <h4>This heading is shown in normal font.</h4> Testen Sie es jetzt Ausgabe:
schönstes Lächeln
<h2>This heading is shown in italic font.</h2> <h3>This heading is shown in oblique font.</h3> <h4>This heading is shown in normal font.</h4>
5) CSS-Schriftartvariante
Die Eigenschaft „CSS-Schriftartvariante“ gibt an, wie die Schriftartvariante eines Elements festgelegt wird. Es kann sich um Normal- und Small-Caps handeln.
p { font-variant: small-caps; } h3 { font-variant: normal; } <h3>This heading is shown in normal font.</h3> <p>This paragraph is shown in small font.</p> Testen Sie es jetzt Ausgabe:
<h3>This heading is shown in normal font.</h3> <p>This paragraph is shown in small font.</p>
6) CSS-Schriftstärke
Die CSS-Eigenschaft „Schriftstärke“ definiert die Stärke der Schriftart und gibt an, wie fett eine Schriftart sein soll. Die möglichen Werte für die Schriftstärke können „Normal“, „Fett“, „Fett“, „Heller“ oder „Zahl“ (100, 200 ... bis 900) sein.
Diese Schriftart ist fett.
Diese Schriftart ist fetter.
Diese Schriftart ist heller.
Diese Schriftart hat eine Stärke von 100.
Diese Schriftart hat eine Schriftstärke von 200.
Diese Schriftart hat eine Schriftstärke von 300.
Diese Schriftart hat eine Schriftstärke von 400.
Diese Schriftart hat eine Schriftstärke von 500.
Diese Schriftart hat eine Schriftstärke von 600.
Diese Schriftart hat eine Schriftstärke von 700.
Als nächstes Java-Scanner
Diese Schriftart hat eine Schriftstärke von 800.
Diese Schriftart hat eine Schriftstärke von 900.
Testen Sie es jetztAusgabe:
Diese Schriftart ist fett.
Diese Schriftart ist fetter.
Diese Schriftart ist heller.
Diese Schriftart hat eine Stärke von 100.
Diese Schriftart hat eine Schriftstärke von 200.
Diese Schriftart hat eine Schriftstärke von 300.
Diese Schriftart hat eine Schriftstärke von 400.
Diese Schriftart hat eine Schriftstärke von 500.
Diese Schriftart hat eine Schriftstärke von 600.
Diese Schriftart hat eine Schriftstärke von 700.
Diese Schriftart hat eine Schriftstärke von 800.
Diese Schriftart hat eine Schriftstärke von 900.