Lektionen
Start
Jetzt lernen
CodeGym /Java Kurs /Frontend SELF DE /Schriftarten

Schriftarten

Frontend SELF DE
Level 14 , Lektion 1
Verfügbar

2.1 Eigenschaft font-family

Schriftarten spielen eine Schlüsselrolle im Webdesign, da sie die Lesbarkeit und die visuelle Attraktivität des Textes beeinflussen. Schriftfamilien definieren den allgemeinen Stil und die Eigenschaften der Schriftarten, die auf Webseiten verwendet werden können. In CSS werden Schriftarten normalerweise in drei Hauptfamilien unterteilt: serif, sans-serif und monospace. Schauen wir uns jede von ihnen genauer an.

Eigenschaft font-family

Die Eigenschaft font-family wird verwendet, um die Schriftfamilie anzugeben. Man kann mehrere Schriftarten angeben, die durch Kommas getrennt sind, damit der Browser die nächste Schriftart in der Liste verwenden kann, falls die erste nicht verfügbar ist.

Java university

Beispiel für die Verwendung mehrerer Schriftarten

    
      font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;

Verwendungsbeispiel:

CSS
    
      body {
        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
      }
HTML
    
      <body>
        <p>Dieser Text wird mit den Schriftarten Helvetica Neue, Helvetica oder Arial angezeigt.</p>
      </body>

2.2 Schriftfamilie serif

Serifenschriften (serif) sind durch kleine Linien oder Striche gekennzeichnet, die an den Enden der Buchstaben und Symbole hinzugefügt werden. Diese Schriften verleihen dem Text ein traditionelleres und formelleres Aussehen.

Beispiele für Serifenschriften:

  • Times New Roman
  • Georgia
  • Garamond
  • Baskerville

Verwendungsbeispiel:

CSS
    
      body {
        font-family: 'Times New Roman', serif;
      }
HTML
    
      <body>
        <h1>Dies ist eine Überschrift</h1>
        <p>Dies ist ein Absatz mit einer Serifenschrift.</p>
      </body>

2.3 Schriftfamilie sans-serif

Sans-Serif-Schriften (sans-serif) haben keine kleinen Linien an den Enden der Buchstaben und Symbole. Diese Schriften wirken moderner und minimalistischer und werden oft für Webdesigns verwendet, da sie auf Bildschirmen gut lesbar sind.

Beispiele für Sans-Serif-Schriften:

  • Arial
  • Helvetica
  • Verdana
  • Open Sans
CSS
    
      body {
        font-family: 'Arial', sans-serif;
      }
HTML
    
      <body>
        <h1>Dies ist eine Überschrift</h1>
        <p>Dies ist ein Absatz mit einer Sans-Serif-Schrift.</p>
      </body>

2.4 Schriftfamilie monospace

Monospace-Schriften (monospace) haben für alle Zeichen die gleiche Breite. Solche Schriften werden häufig zur Darstellung von Code, technischer Dokumentation und Tabellen verwendet, wo es wichtig ist, dass die Zeichen vertikal ausgerichtet sind.

Beispiele für Monospace-Schriften:

  • Courier New
  • Consolas
  • Monaco
  • Lucida Console

Verwendungsbeispiel:

CSS
    
      body {
        font-family: 'Courier New', monospace;
      }
HTML
    
      <body>
        <h1>Dies ist eine Überschrift</h1>
        <p>Dies ist ein Absatz mit einer Monospace-Schrift.</p>
        <pre>
          function helloWorld() {
            console.log("Hallo, Welt!");
          }
        </pre>
      </body>

Zur Verbesserung der Wahrnehmung und stilistischen Vielfalt werden auf Webseiten häufig Kombinationen verschiedener Schriftfamilien verwendet. Zum Beispiel können Überschriften mit serif-Schriften gestaltet werden, während der Haupttext mit sans-serif-Schriften erscheint. Und Code ist immer monospace.

Kommentare
TO VIEW ALL COMMENTS OR TO MAKE A COMMENT,
GO TO FULL VERSION