System-Font-Stack

Die Standardeinstellung auf die Systemschriftart eines bestimmten Betriebssystems kann die Leistung verbessern, da der Browser keine Schriftartdateien herunterladen muss, sondern eine verwendet, die er bereits hatte. Das gilt allerdings für jede „Web-sichere“ Schriftart. Der Reiz von „Systemschriftarten“ liegt darin, dass sie der aktuellen OS-Schriftart entsprechen, sodass sie eine angenehme Optik haben können.

Welche sind diese Systemschriftarten? Zum Zeitpunkt des Schreibens gliedert es sich wie folgt

OS	Version	Systemschriftart
macOS	Monterey	San Francisco Pro (variabel)
macOS	El Capitan	San Francisco
macOS	Yosemite	Helvetica Neue
macOS	Mavericks	Lucida Grande
Windows	Vista	Segoe UI
Windows	XP	Tahoma
Windows	3.1 bis ME	Microsoft Sans Serif
Android	Ice Cream Sandwich (4.0)+	Roboto
Android	Cupcake (1.5) bis Honeycomb (3.2.6)	Droid Sans
Ubuntu	Alle Versionen	Ubuntu

Zum Snippet, bitte!

Der Grund für die Einleitung ist, dass sie zeigt, wie tief Sie zurückgehen müssen, um Systemschriftarten zu unterstützen. Außerdem zeigt sie, dass mit neuen Systemversionen neue Schriftarten kommen und somit die Möglichkeit besteht, Ihren Schriftartstapel zu aktualisieren.

Methode 1: Systemschriftarten auf Elementebene

Chrome und Safari haben kürzlich „system-ui“ eingeführt, was eine generische Schriftfamilie ist, die anstelle von „-apple-system“ und „BlinkMacSystemFont“ in den folgenden Beispielen verwendet werden kann. Hut ab vor J.J. für die Info.

Eine Methode zur Anwendung von Systemschriftarten ist der direkte Aufruf auf einem Element über die Eigenschaft font-family.

GitHub nutzt diese Methode auf seiner Website und wendet Systemschriftarten auf dem body-Element an

/* System Fonts as used by GitHub */
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

Sowohl Medium als auch das WordPress-Admin verwenden einen ähnlichen Ansatz, mit einer leichten Abwandlung, insbesondere der Unterstützung für Oxygen Sans (entwickelt für das GNU+Linux-Betriebssystem) und Cantarell (entwickelt für das GNOME-Betriebssystem). Dieser Snippet unterstützt auch bestimmte Arten von Emojis und Symbolen nicht mehr

/* System Fonts as used by Medium and WordPress */
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue",sans-serif;
}

In jüngerer Zeit haben Chrome und Safari system-ui eingeführt, eine generische Schriftfamilie, die -apple-system und BlinkMacSystemFont ersetzen kann. Das bedeutet, dass der GitHub-Snippet wie folgt reduziert werden könnte

/* System Fonts with system-ui */
body {
  font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

Hinweis: Booking.com hat eine ausführliche Abhandlung veröffentlicht, die davor warnt, die Snippets, die mit -apple-system beginnen, in der Kurzschrifteigenschaft font zu verwenden, da einige Browser die führende Schriftart als Vendor-Präfix ansehen und ignorieren werden. Verwenden Sie stattdessen die Eigenschaft font-family oder ersetzen Sie -apple-system und BlinkMacSystemFont durch system-ui.

Die offensichtliche Einschränkung hier ist, dass Sie diese lange Liste von Schriftarten jedes Mal aufrufen müssen, wenn Sie sie auf ein einzelnes Element anwenden möchten. Mit der Zeit könnte das umständlich werden und Ihren Code aufzublähen. Stattdessen könnten Sie erwägen, eine CSS-Variable dafür zu verwenden

:root {
  --system-ui: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

.element {
  font-family: var(--system-ui);
}

Dies ist sicherlich leichter zu lesen, aber auch besser wartbar, falls der Stapel jemals aktualisiert werden muss. Ändern Sie ihn einmal und er gilt überall!

Methode 2: Systemschriftstapel

Jonathan Neal bietet eine alternative Methode, bei der Systemschriftarten mithilfe von @font-face deklariert werden.

/* Define the "system" font family */
@font-face {
  font-family: system-ui;
  font-style: normal;
  font-weight: 300;
  src: local(".SFNSText-Light"), local(".HelveticaNeueDeskInterface-Light"), local(".LucidaGrandeUI"), local("Ubuntu Light"), local("Segoe UI Light"), local("Roboto-Light"), local("DroidSans"), local("Tahoma");
}

/* Now, let's apply it on an element */
body {
  font-family: "system-ui";
}

Der Snippet wurde zum Zeitpunkt des Schreibens seit einiger Zeit nicht mehr aktualisiert und kann zu unterschiedlichen Schriftarten führen, aber der Grund, warum wir ihn hier aufnehmen, ist, dass er die Möglichkeit zeigt, Variationen der in der obigen Snippet definierten system-ui-Schriftfamilie zu definieren, um Kursivschrift, Fettdruck und zusätzliche Schnitte zu berücksichtigen.

Wenn wir keine CSS-Variablen hätten, wäre dies eine viel effizientere Methode, den Code zu schreiben und zu aktualisieren.

Verwandt

• OS-spezifische Schriftarten in CSS – einschließlich einer JavaScript-Methode zum Testen der verwendeten Schriftart.
• Systemschriftarten in SVG
• Implementierung von Systemschriftarten auf Booking.com – Eine Lektion gelernt – Booking.com teilt mit, wie sie gelernt haben, dass die Verwendung eines Systemschriftstapels in der Kurzschrifteigenschaft font nicht wie erwartet funktioniert.