Zahlen-Teilmengen für Inhalte, die so fantastisch sind wie der Rest Ihrer Inhalte

Sie legen die letzten Handgriffe an Ihrer neuen Million-Dollar-Idee an – Ihr Text ist perfekt, Ihr Farbschema blendend und Sie haben eine glorreiche Schriftpaarung gefunden (wer hätte gedacht, dass Baskerville und Raleway so gut zusammen aussehen? Sie schon.), aber es gibt ein Problem: Die lästigen Kleinbuchstabenzahlen von Raleway lassen Ihren Warenkorb verwirrend aussehen und überfordern den Benutzer.

Dies ist ein eher triviales Problem, aber ein Problem, das schöne Schriftarten unbrauchbar machen kann, wenn Zahlen ein wichtiger Bestandteil Ihrer Website sind; zum Beispiel in einem Geschäft oder einem Analyse-Dashboard. Und dies ist nicht nur ein Problem mit Kleinbuchstabenzahlen. Nicht-monospazierte Ziffern können beim schnellen Überfliegen einer Zahlenliste genauso ablenkend sein.

Wir werden uns einige Techniken ansehen, um dieses Problem zu bekämpfen, aber zuerst müssen wir eine Schriftart finden, deren Zahlen wir anstelle unserer Hauptschriftart verwenden können. Es gibt keine eindeutige Methode, Ihren Schriftart-Zwilling zu finden. Die wichtigsten Merkmale, auf die Sie achten sollten, sind Gewicht und Breite, damit Sie sie mit Ihrer Originalschriftart abgleichen können. Wenn Sie Zahlen mit mehreren Schriftschnitten verwenden möchten, suchen Sie nach Schriftarten mit einer großen Bandbreite an Schriftschnitten, um Ihre Chancen auf einen Abgleich mit Ihrer Originalschriftart zu erhöhen. Möglicherweise benötigen Sie für jeden Schriftschnitt eine andere Zahlenschriftart oder eine falsche Kombination von Schriftschnittpaaren, aber das ist in Ordnung, denn es gibt tatsächlich *keine Schriftart-Polizei*.

Hier sind einige Google-Schriftarten-Paare, die gut genug übereinstimmen, um bei kleinen Größen nicht aufzufallen

Methode 0: In Spans einpacken

@import url('https://fonts.googleapis.com/css?family=Raleway:400|Nunito:300');

body {
  font-family: 'Raleway', sans-serif;
}

.numeral {
  font-family: 'Nunito', 'Raleway', sans-serif;
}

Your total comes to $<span class="numeral">15</span>.<span class="numeral">99</span>

Dies ist keine gute Lösung. Die Notwendigkeit, das Markup zu ergänzen, ist schlecht und das Laden beider Schriftarten in ihrer Gesamtheit ist nicht ideal, aber wenn Sie nicht viele Inhalte haben und eine einfache Lösung suchen, gibt es keinen Grund zur Scham.

Was wir lieber finden würden, ist eine reine CSS-Lösung, die die Zahlen der Zahlenschriftart isoliert und sie anstelle von (oder vor der Hauptschriftart) lädt, *ohne dass das HTML geändert werden muss*. Lesen Sie weiter.

Wie font-family funktioniert

Die folgenden Methoden basieren auf der Erstellung einer @font-face-Deklaration, die sich nur auf unsere bevorzugte Teilmenge von Zahlen bezieht und diese wie gewohnt im Schriftartenstapel referenziert.

body {
  font-family: 'Custom Numeral Font', 'Main Font', sans-serif;
}

Indem Sie die Teilschriftart zuerst in Ihrer font-family-Deklaration anordnen, wird der Browser standardmäßig darauf zurückfallen und auf die nachfolgenden Schriftarten für *Glyphen* zurückfallen, die in der ersten nicht verfügbar sind. Dies ist eine wirklich wichtige Unterscheidung – der Browser prüft nicht nur, ob die deklarierte Schriftart verfügbar ist (lokal oder über @font-face importiert), sondern er prüft auch, ob ihre Zeichenzuordnung das angeforderte Zeichen enthält, und geht dann von Zeichen zu Zeichen zur nächsten Schriftart über, wenn dies nicht der Fall ist. Übrigens, die Spezifikation für den Schriftarten-Abgleichalgorithmus ist eine überraschend interessante Lektüre.

Es ist wichtig zu beachten, dass der Browser die Schriftfamilie dem Schriftgewicht und -stil vorzieht. Wenn Sie also die Zahlen für nur ein normales Gewicht teilsubsettingen und dann eine Zahl innerhalb eines fett formatierten Elements haben, wählt der Browser das normale Gewicht des Zeichens aus der Zahlenschriftart anstelle des fetten Gewichts der Hauptschriftart aus. Grundsätzlich gilt: Wenn Sie das tun, stellen Sie sicher, dass Sie dies für alle Schriftgewichte tun, in denen Sie Zahlen anzeigen.

Methode 1: Benutzerdefiniertes Subsetting von Font Squirrel

Wenn Sie Ihre Schriftdateien selbst hosten, anstatt sie von einem gehosteten Dienst wie Adobe Fonts oder Google Fonts zu beziehen, können Sie die Expertenkonfiguration des Webfont-Generators von Font Squirrel verwenden, um Dateien zu erstellen, die nur den Zahlen-Teilmengen enthalten. Lesen Sie die Lizenzvereinbarung der Schriftart, um sicherzustellen, dass diese Art der Manipulation zulässig ist, bevor Sie fortfahren.

Sobald Sie die Teilschriftdateien haben, können Sie sie wie gewohnt verwenden. Lesen Sie diesen Artikel für weitere Informationen zu @font-face und Browserunterstützung für Dateitypen.

@font-face {
  font-family: 'Nunito';
  src: url('nunito-light-webfont.woff2') format('woff2'),
        url('nunito-light-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

body {
  font-family: 'Nunito', 'Raleway', sans-serif;
}

Wenn Sie auf die Leistung achten, können Sie auch Ihre Hauptschriftart teilsubsetten, um ihre Zahlenglyphen zu entfernen und ein paar Bytes einzusparen.

Methode 2: @font-face unicode-range Subsetting

Die unicode-range-Eigenschaft von @font-face wird hauptsächlich verwendet, um den Zeichensatz zu deklarieren, den die Schriftdateien enthalten, um dem Browser zu helfen zu entscheiden, ob die Dateien heruntergeladen werden sollen oder nicht; ein großer potenzieller Leistungsschub für mehrsprachige Websites, die nicht-lateinische Alphabete verwenden. Die Kehrseite ist, dass unicode-range die @font-face-Deklaration auch auf den angegebenen Bereich *beschränkt*, was bedeutet, dass wir es nur verwenden können, um bestimmte Teile der Schriftdateien für die Verwendung im Browser verfügbar zu machen.

@font-face {
  font-family: 'Nunito';
  src: url('nunito-light-webfont.woff2') format('woff2'),
       url('nunito-light-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  unicode-range: U+30-39; /* 0-9 /
}

body {
  font-family: 'Nunito', 'Raleway', sans-serif;
}

Dies ist schlechter für die Leistung als die vorherige Methode, da der Browser immer noch die gesamte Schriftdatei herunterladen muss, um die Zahlen zu verwenden, aber vorzuziehen ist, wenn die Lizenzvereinbarung die Manipulation der Dateien nicht zulässt.

Leider können wir diese Methode nicht zum Subsetten von Schriftarten verwenden, die bereits von einem externen Dienst geladen wurden, aber sie kann für lokale Schriftarten verwendet werden.

@font-face {
  font-family: 'Times Numeral Roman';
  src: local('Times New Roman');
  unicode-range: U+30-39; /* 0-9 */
}

Dies ist eine clevere Möglichkeit, bestimmte Zeichen Ihrer Hauptschriftart zu ändern, vielleicht für ein kaufmännisches Und oder bevorzugte geschwungene Anführungszeichen (in diesem Fall müssten Sie auf den Witz mit "Times Numeral Roman" verzichten), ohne Leistungsverlust, da die lokale Schriftart einfach ignoriert wird, wenn sie nicht existiert. Sie können die Verfügbarkeit gängiger Systemschriftarten hier überprüfen. *Und Sie können zur Königin der Typografie-Nerds werden, indem Sie eine Website erstellen, die nur dann richtig geschätzt werden kann, wenn Sie alle ihre Teilschriftarten lokal heruntergeladen haben, eine exklusive Premium-Leistung.*

Die Unterstützung für unicode-range ist ziemlich gut, aber beachten Sie, dass die Teilschriftart für den gesamten Text verwendet wird, wenn sie nicht unterstützt wird. Machen Sie es also vielleicht nicht zu Papyrus. Oder wenn Sie wirklich Papyrus verwenden möchten, können Sie hinterlistig sein und zuerst eine weitere web-sichere Schriftart hinzufügen, damit Browser ohne Unterstützung stattdessen darauf zurückfallen.

@font-face {
  font-family: 'Backup Font';
  src: local('Arial');
  unicode-range: U+60; /* backtick because I can't think of a more innocuous character */
}

@font-face {
  font-family: 'Papyrus Ampersand';
  src: local('Papyrus');
  unicode-range: U+26; /* & */
}

body {
  font-family: 'Backup Font', 'Papyrus Ampersand', 'Main Font', sans-serif;
}

Methode 3: Google Fonts Text-Subsetting

Die Google Fonts API bietet einige nützliche zusätzliche Optionen zur Optimierung durch Angabe nur bestimmter Schriftgewichte, Stile und Alphabete (der Parameter subset nimmt eine Liste von Alphabeten wie greek,cyrillic und nicht einen Unicode-Bereich, leider), aber es gibt auch einen wenig bekannten "Beta"-Parameter namens text, der hauptsächlich für Titel und Logos gedacht ist, aber für unseren Zweck genauso gut funktioniert.

@import url('https://fonts.googleapis.com/css?family=Raleway:400');
@import url('https://fonts.googleapis.com/css?family=Nunito:300&text=0123456789');

body {
  font-family: 'Nunito', 'Raleway', sans-serif;
}

So einfach! So elegant!

Der Parameter text kann beliebige UTF-8-Zeichen akzeptieren, aber stellen Sie sicher, dass Sie sie URL-codieren, wenn sie nicht alphanumerisch sind. Das einzige mögliche Problem bei dieser Methode ist, dass wir keinen benutzerdefinierten Namen mit @font-face erstellen, sodass, wenn der Benutzer die Teilschrift bereits in seinem System hat, diese Schriftart in ihrer Gesamtheit verwendet wird.

Ich konnte keine anderen gehosteten Schriftartdienste finden, die diese Granularität für das Subsetting bieten, aber kommentieren Sie unten, wenn Sie auf einen stoßen.

Einige Anwendungsfälle