Die Standardeinstellung der Systemschriftart eines bestimmten Betriebssystems kann die Leistung steigern, da der Browser keine Schriftartdateien herunterladen muss, sondern eine bereits vorhandene verwendet. Dies gilt jedoch für jede "web-sichere" Schriftart. Das Schöne an „System“ -Schriftarten ist, dass sie mit den aktuellen Betriebssystemen übereinstimmen, sodass sie komfortabel aussehen können.
Was sind diese Systemschriftarten? Zum Zeitpunkt dieses Schreibens gliedert es sich wie folgt:
| Betriebssystem | Ausführung | Systemschriftart |
|---|---|---|
| Mac OS X | El Capitan | San Francisco |
| Mac OS X | Yosemite | Helvetica Neue |
| Mac OS X | Außenseiter | Lucida Grande |
| Windows | Vista | Segoe UI |
| Windows | XP | Tahoma |
| Windows | 3.1 zu mir | Microsoft Sans Serif |
| Android | Eiscremesandwich (4.0) + | Roboto |
| Android | Cupcake (1.5) zu Honeycomb (3.2.6) | Droid Sans |
| Ubuntu | Alle Versionen | Ubuntu |
Komm schon zum Snippet!
Der Grund für das Vorwort ist, dass es zeigt, wie tief Sie möglicherweise zurückgehen müssen, um Systemschriftarten zu unterstützen. Darüber hinaus zeigt es, dass mit neuen Systemversionen neue Schriftarten und damit die Möglichkeit entstehen, dass Sie Ihren Schriftstapel aktualisieren müssen.
Methode 1: Systemschriftarten auf Elementebene
Chrome und Safari haben kürzlich "system-ui" ausgeliefert, eine generische Schriftfamilie, die in den folgenden Beispielen anstelle von "-apple-system" und "BlinkMacSystemFont" verwendet werden kann. Hutspitze an JJ für die Info.Eine Methode zum Anwenden von Systemschriftarten besteht darin, sie mithilfe der font-familyEigenschaft direkt auf ein Element aufzurufen .
GitHub verwendet diese Methode auf seiner Site und wendet Systemschriftarten auf das bodyElement 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 der WordPress-Administrator verwenden einen ähnlichen Ansatz mit geringfügigen Abweichungen, insbesondere Unterstützung für Oxygen Sans (erstellt für das Betriebssystem GNU + Linux) und Cantarell (erstellt für das Betriebssystem GNOME). Dieses Snippet lässt auch die Unterstützung für bestimmte Arten von Emoji und Symbolen fallen:
/* 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; )Hinweis: Diese Methode sollte nur für die font-familyEigenschaft anstelle der fontKurzform verwendet werden. Booking.com hat eine gründliche Beschreibung der Warnungen veröffentlicht, die aufgrund der führenden Schriftart als Herstellerpräfix generiert werden.
Methode 2: Systemschriftstapel
Die Einschränkung der ersten Methode besteht darin, dass Sie bei jeder Verwendung eines Elements den gesamten Stapel von Schriftarten aufrufen müssen. Dies kann umständlich werden und Ihren Code aufblähen, je nachdem, wo und wie er verwendet wird.
Jonathan Neal bietet eine alternative Methode, bei der Systemschriftarten mit deklariert werden @font-face.
Der Vorteil hierbei ist, dass Sie die Schriftarten einmal deklarieren können und dies dann zu dem wird, was Sie in der font-familyEigenschaft anstelle der langen Liste der Schriftarten jedes Mal können.
/* Define the "system" font family */ @font-face ( font-family: system; 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"; )Beachten Sie, dass das vollständige Beispiel von Jonathan die Möglichkeit veranschaulicht, Variationen der systemSchriftfamilie zu definieren, die im obigen Snippet definiert wurden, um Kursivschrift, Fettdruck und zusätzliche Gewichte zu berücksichtigen.
verbunden
- Betriebssystemspezifische Schriftarten in CSS - Enthält eine JavaScript-Methode zum Testen der verwendeten Schriftart.
- Systemschriftarten in SVG
- Implementieren von Systemschriftarten auf Booking.com - Eine Lektion gelernt - Booking.com teilt mit, wie sie mithilfe eines Systemschriftstapels in der
fontKurzschrift gelernt haben, funktioniert nicht wie erwartet.