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-93f0f5c25f18dab9d176bd4f6de5d30e 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:

5d1e94760349a02ec7e3e05385bc999a
  4a249f0d628e2318394fd9b75b4636b1Welcome to Our Blog473f0a7621bec819994bb5020d29372a
  c1a436a314ed609750bd7c7d319db4daLatest Updates2e9b454fa8428549ca2e64dfac4625cd
  03c914392195facb4bb03ef129401e65Stay updated with the latest trends in web development, design, and more.94b3e26ee717c64999d7867364b1b4a3
  e388a4556c0f65e1904146cc1a846beeExplore articles, tutorials, and resources to help you master the art of web design.94b3e26ee717c64999d7867364b1b4a3
16b28748ea4df4d9c2150843fecfba68

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!