System Fonts in SVG

Es gab eine Zeit, in der die kluge Wahl für Web-Schriftarten darin bestand, eine `font-family` zu wählen, die auf so vielen Plattformen wie möglich unterstützt wurde. font-family: Tahoma; und dergleichen. Oder noch besser, ein Font-Stack, der auf möglichst ähnliche Schriftarten zurückfällt, wie font-family: Tahoma, Verdana, Segoe, sans-serif;.

Heutzutage verwendet eine erstaunliche Anzahl von Websites benutzerdefinierte Schriftarten. 60%!

Kein Wunder, dass es auch erheblichen Widerstand gegen benutzerdefinierte Schriftarten gibt. Sie müssen heruntergeladen werden, was Leistung/Bandbreite beeinträchtigt. Es gibt viel Nuancen darüber, wie man sie lädt.

Ebenso wenig überraschend gibt es Befürworter für die Rückkehr zu lokalen Schriftarten. Schnell! Gut genug! Schauen wir uns das kurz an und dann auch, wie man sie innerhalb von SVG verwendet.

Der Trend ist nicht nur eine Rückkehr zu lokalen Schriftarten, sondern zu dem, was als „Systemschriftarten“ bezeichnet wird. Der Punkt ist nicht so sehr ein einzelner Schriftstapel, der über Browser/Plattform/Version hinweg konsistent aussieht, sondern ein einzelner Schriftstapel, der dem entspricht, was das jeweilige Betriebssystem verwendet.

Wenn das Betriebssystem „San Francisco“ in der Benutzeroberfläche verwendet, sollte der Schriftstapel San Francisco anzeigen. Wenn das Betriebssystem Roboto verwendet, dann soll es so sein. Der tatsächliche Schriftstapel dafür ist ziemlich umfangreich. Aber das ist der Punkt: Listen Sie einfach eine Reihe von Schriftarten in der Reihenfolge auf, in der Sie sie verwenden möchten, und CSS wird den Stapel durchgehen, bis es eine findet, die es hat.

Hier ist, was GitHub verwendet

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

Der WordPress-Admin und die Medium-Oberfläche verwenden derzeit dies

body {
  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
}

Der Titel dieses Beitrags handelt von der Verwendung dieser Schriftstapel in SVG. Daran ist nichts Besonderes, Andersartiges oder besonders Interessantes. Sie können diesen Schriftstapel per CSS innerhalb des SVG anwenden oder ihn einfach direkt auf ein Textelement setzen

<text font-family='-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"' font-size="18" font-weight="400" fill="black" x="50" y="50">
  Some Text
</text>

Text in SVG zu setzen ist ziemlich fantastisch, da er seine Zugänglichkeit beibehält und extrem flexibel ist.

Nochmal, der Punkt bei all dem ist, die vom Betriebssystem verwendete Schriftart anzupassen. Schauen wir uns das also an. OS X ist besonders interessant, da sich die Systemschriftart in den letzten Jahren mehrmals geändert hat.

OS 10.0 – 10.9 – Lucida Grande
OS 10.10 – 10.11 – Helvetica Neue
OS 10.12 – San Francisco

Chrome DevTools zeigt Ihnen nicht nur den Schriftstapel an, wenn Sie ein Element inspizieren, sondern auch die gerenderten Schriftarten.

Und hier ist ein völlig anderes Betriebssystem

Hier sind eine Reihe von Screenshots

Von diesem Demo.

Die Metriken der verschiedenen Schriftarten sind etwas unterschiedlich. Der Text passt sich je nach Rendering etwas enger und lockerer an. Aber es ist nicht zu weit weg. Man würde vielleicht keinen typografischen Lockup mit Systemschriftarten erstellen, aber alles in allem sehr brauchbar.