Typografie und Schriftstil in CSS

Vorlesung 4: Typografie und Schriftstil in CSS

In dieser Vorlesung erfahren Sie, wie Sie Text mithilfe von CSS formatieren. Typografie ist ein entscheidender Aspekt des Webdesigns, der sich auf die Lesbarkeit, das Benutzererlebnis und die Gesamtästhetik auswirkt. Am Ende dieser Vorlesung wissen Sie, wie Sie verschiedene Schriftarten anwenden und die Textdarstellung auf Ihrer Website steuern können.

---

Webfonts verstehen

Webfonts ermöglichen Ihnen die Verwendung verschiedener Schriftarten auf Ihrer Website. Sie können Systemschriftarten verwenden, die auf Geräten vorinstalliert sind, oder Sie können benutzerdefinierte Schriftarten mithilfe von Diensten wie Google Fonts importieren.

1. Systemschriftarten

Systemschriftarten sind zuverlässig, da sie auf den meisten Geräten vorinstalliert sind, schränken jedoch Ihre Gestaltungsmöglichkeiten ein.

• Beispiel:

  body {
    font-family: Arial, sans-serif;
  }

2. Google Fonts

Google Fonts bietet eine große Auswahl an Web-Schriftarten, die Sie problemlos in Ihre Website integrieren können.

• Beispiel:

  1. Fügen Sie zunächst den Link zur Schriftart in Ihren HTML- ein:

   <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
  

1. Anschließend wenden Sie die Schriftart in Ihrem CSS an:
   

    body {
      font-family: 'Roboto', sans-serif;
    }
   

Schrifteigenschaften in CSS

CSS bietet eine Vielzahl von Eigenschaften zum Gestalten Ihrer Schriftarten, einschließlich Schriftgröße, -stärke, -stil und mehr.

1. Schriftgröße

Sie können die Größe des Textes mithilfe der Eigenschaft „font-size“ steuern.

• Beispiel:

  h1 {
    font-size: 36px;
  }
  p {
    font-size: 16px;
  }

2. Schriftstärke

Mit der Eigenschaft „font-weight“ können Sie festlegen, wie fett der Text angezeigt wird.

• Beispiel:

  h1 {
    font-weight: bold; /* Or use numeric values like 700 */
  }

3. Schriftstil

Mit der Eigenschaft „font-style“ können Sie Text kursiv formatieren.

• Beispiel:

  em {
    font-style: italic;
  }

4. Schriftartvariante

Verwenden Sie die Schriftartvariante, um Text in Kapitälchen anzuzeigen.

• Beispiel:

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

5. Zeilenhöhe

Die Eigenschaft line-height steuert den Abstand zwischen Textzeilen.

• Beispiel:

  p {
    line-height: 1.5;
  }

6. Textausrichtung

Die text-align-Eigenschaft steuert die horizontale Ausrichtung von Text innerhalb eines Elements.

• Beispiel:

  h1 {
    text-align: center;
  }

7. Textdekoration

Mit der Eigenschaft text-decoration können Sie dem Text Unterstreichungen, Überstreichungen oder Durchstreichungen hinzufügen.

• Beispiel:

  a {
    text-decoration: underline;
  }

8. Textschatten

Mit der text-shadow-Eigenschaft können Sie Ihrem Text einen Schatteneffekt hinzufügen.

• Beispiel:

  h2 {
    text-shadow: 2px 2px 5px gray;
  }

Praxisbeispiel:

Kombinieren wir diese Eigenschaften, um eine Webseite mit Schwerpunkt auf Typografie zu gestalten.

HTML:

<div class="content">
  <h1>Welcome to Our Blog</h1>
  <h2>Latest Updates</h2>
  <p class="intro">Stay updated with the latest trends in web development, design, and more.</p>
  <p>Explore articles, tutorials, and resources to help you master the art of web design.</p>
</div>

CSS:

/* Google Font */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap');

body {
  font-family: 'Open Sans', sans-serif;
  color: #333;
  line-height: 1.6;
}

/* Heading Styles */
h1 {
  font-size: 36px;
  font-weight: 700;
  text-align: center;
  text-shadow: 2px 2px 4px #aaa;
}

h2 {
  font-size: 28px;
  font-weight: 700;
  margin-top: 20px;
}

/* Paragraph Styles */
p {
  font-size: 18px;
  margin-bottom: 15px;
}

.intro {
  font-style: italic;
  font-variant: small-caps;
  text-align: justify;
}

/* Centering the content */
.content {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

In diesem Beispiel:

• Für den gesamten Text wird die Google-Schriftart „Open Sans“ verwendet.
• Die Überschriften (h1, h2) werden mit bestimmten Schriftgrößen, Stärken und Textschatten gestaltet.
• Absätze erhalten eine Standardschriftgröße, wobei ein spezieller Stil auf die .intro-Klasse angewendet wird, einschließlich Kursivschrift und Kapitälchen.
• Der Inhalt wird mit maximaler Breite und automatischen Rändern auf der Seite zentriert.

Übungsübung

1. Erstellen Sie eine HTML-Seite mit verschiedenen Überschriften und Absätzen.
2. Wenden Sie verschiedene Schrifteigenschaften an, um Ihren Text zu gestalten.
3. Verwenden Sie eine Google-Schriftart, um Ihrer Webseite ein einzigartiges Aussehen zu verleihen.
4. Experimentieren Sie mit Textausrichtung, Dekoration und Schatteneffekten.

---

Nächstes Thema: In der nächsten Vorlesung besprechen wir CSS-Layouts: Floats, Flexbox und Grid, wo Sie lernen, wie Sie komplexe und reaktionsfähige Layouts erstellen Ihre Website. Bleiben Sie dran!

---

Folgen Sie mir auf LinkedIn
Ridoy Hasan

Das obige ist der detaillierte Inhalt vonTypografie und Schriftstil in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!