CSS -Tutorial

CSS-Startseite CSS-Einführung CSS-Syntax CSS-Selektoren CSS-Anleitung CSS-Kommentare CSS-Farben CSS-Hintergründe CSS-Grenzen CSS-Ränder CSS-Padding CSS-Höhe/Breite CSS-Box-Modell CSS-Gliederung CSS-Text CSS-Schriftarten CSS-Icons CSS-Links CSS-Listen CSS-Tabellen CSS-Anzeige CSS Max-Breite CSS-Position CSS Z-Index CSS-Überlauf CSS-Float CSS Inline-Block CSS-Ausrichtung CSS-Kombinatoren CSS Pseudo-Klasse CSS Pseudo-Element CSS-Opazität CSS-Navigationsleiste CSS-Dropdowns CSS-Bildergalerie CSS-Bild-Sprites CSS-Attribut-Selektoren CSS-Formulare CSS-Zähler CSS-Website-Layout CSS-Einheiten CSS-Spezifität CSS !wichtig CSS-Mathematikfunktionen

CSS-Erweitert

Abgerundete CSS-Ecken CSS-Randbilder CSS-Hintergründe CSS-Farben CSS-Farbschlüsselwörter CSS-Verläufe CSS-Schatten CSS-Texteffekte CSS-Webfonts CSS-2D-Transformationen CSS-3D-Transformationen CSS-Übergänge CSS-Animationen CSS-Tooltips Bilder im CSS-Stil CSS-Bildreflexion CSS-Objektanpassung CSS-Objektposition CSS-Maskierung CSS-Schaltflächen CSS-Paginierung CSS mehrere Spalten CSS-Benutzeroberfläche CSS-Variablen Größe von CSS-Boxen CSS-Medienabfragen CSS MQ-Beispiele CSS-Flexbox

CSS- responsiv

RWD-Einführung RWD-Ansichtsfenster RWD-Rasteransicht RWD-Medienabfragen RWD-Bilder RWD-Videos RWD-Frameworks RWD-Vorlagen

CSS -Raster

Grid-Einführung Grid-Container Rasterelement

CSS -SASS

SASS-Tutorial

CSS- Beispiele

CSS-Vorlagen CSS-Beispiele CSS-Quiz CSS-Übungen CSS-Zertifikat

CSS- Referenzen

CSS-Referenz CSS-Selektoren CSS-Funktionen CSS-Referenz Aural CSS-websichere Schriftarten CSS animierbar CSS-Einheiten CSS PX-EM-Konverter CSS-Farben CSS-Farbwerte CSS-Standardwerte CSS-Browser-Unterstützung

CSS -websichere Schriftarten


Was sind websichere Schriftarten?

Websichere Schriftarten sind Schriftarten, die universell auf allen Browsern und Geräten installiert sind.


Fallback-Schriftarten

Es gibt jedoch keine 100 % vollständig websicheren Schriftarten. Es besteht immer die Möglichkeit, dass eine Schriftart nicht gefunden oder nicht richtig installiert wird.

Daher ist es sehr wichtig, immer Fallback-Fonts zu verwenden.

font-family Das bedeutet, dass Sie der Eigenschaft eine Liste ähnlicher „Backup-Schriftarten“ hinzufügen sollten . Wenn die erste Schriftart nicht funktioniert, versucht der Browser die nächste und die nächste und so weiter. Beenden Sie die Liste immer mit einem generischen Schriftfamiliennamen.

Beispiel

Hier gibt es drei Schriftarten: Tahoma, Verdana und Sans-Serif. Die zweite und dritte Schriftart sind Backups, falls die erste nicht gefunden wird.

p {
font-family: Tahoma, Verdana, sans-serif;
}

Beste websichere Schriftarten für HTML und CSS

Die folgende Liste enthält die besten websicheren Schriftarten für HTML und CSS:

  • Arial (serifenlos)
  • Verdana (serifenlos)
  • Helvetica (serifenlos)
  • Tahoma (serifenlos)
  • Trebuchet MS (serifenlos)
  • Times New Roman (Serife)
  • Georgien (Serife)
  • Garamond (Serife)
  • Kurier Neu (Monospace)
  • Pinselschrift MT (kursiv)

Hinweis: Bevor Sie Ihre Website veröffentlichen, überprüfen Sie immer, wie Ihre Schriftarten auf verschiedenen Browsern und Geräten angezeigt werden, und verwenden Sie immer Fallback-Schriftarten!



Arial (serifenlos)

Arial ist die am weitesten verbreitete Schriftart sowohl für Online- als auch für Printmedien. Arial ist auch die Standardschriftart in Google Docs.

Arial ist eine der sichersten Webschriftarten und auf allen gängigen Betriebssystemen verfügbar.

Beispiel

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet.

0 1 2 3 4 5 6 7 8 9


Verdana (serifenlos)

Verdana ist eine sehr beliebte Schriftart. Verdana ist auch bei kleinen Schriftgrößen gut lesbar.

Beispiel

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet.

0 1 2 3 4 5 6 7 8 9


Helvetica (serifenlos)

Die Schriftart Helvetica wird von Designern geliebt. Es ist für viele Arten von Unternehmen geeignet.

Beispiel

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet.

0 1 2 3 4 5 6 7 8 9


Tahoma (serifenlos)

Die Schriftart Tahoma hat weniger Platz zwischen den Zeichen.

Beispiel

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet.

0 1 2 3 4 5 6 7 8 9


Trebuchet MS (serifenlos)

Trebuchet MS wurde 1996 von Microsoft entwickelt. Verwenden Sie diese Schriftart mit Bedacht. Wird nicht von allen mobilen Betriebssystemen unterstützt.

Beispiel

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet.

0 1 2 3 4 5 6 7 8 9


Times New Roman (Serife)

Times New Roman ist eine der bekanntesten Schriftarten der Welt. Es sieht professionell aus und wird in vielen Zeitungen und "Nachrichten"-Websites verwendet. Es ist auch die primäre Schriftart für Windows-Geräte und -Anwendungen.

Beispiel

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet.

0 1 2 3 4 5 6 7 8 9


Georgien (Serife)

Georgia ist eine elegante Serifenschrift. Es ist bei verschiedenen Schriftgrößen sehr gut lesbar, daher ist es ein guter Kandidat für responsives Design für Mobilgeräte.

Beispiel

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet.

0 1 2 3 4 5 6 7 8 9


Garamond (Serife)

Garamond ist eine klassische Schriftart, die für viele gedruckte Bücher verwendet wird. Es hat ein zeitloses Aussehen und eine gute Lesbarkeit.

Beispiel

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet.

0 1 2 3 4 5 6 7 8 9


Kurier Neu (Monospace)

Courier New ist die am weitesten verbreitete Monospace-Serifenschrift. Courier New wird häufig mit Codierungsanzeigen verwendet, und viele E-Mail-Anbieter verwenden es als Standardschriftart. Courier New ist auch die Standardschrift für Filmdrehbücher.

Beispiel

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet.

0 1 2 3 4 5 6 7 8 9


Pinselschrift MT (kursiv)

Die Schriftart Brush Script MT wurde entwickelt, um die Handschrift nachzuahmen. Es ist elegant und raffiniert, kann aber schwer zu lesen sein. Verwenden Sie es sorgfältig.

Beispiel

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet.

0 1 2 3 4 5 6 7 8 9

Tipp: Sehen Sie sich auch alle verfügbaren Google Fonts und deren Verwendung an.