Teilmenge Ziffern, so sind Sie so Genial, wie der Rest Ihrer Inhalte

0
18

Sie setzen den letzten Schliff auf Ihrem neuen Millionen-dollar-Idee — dein Exemplar ist perfekt, dein Farbschema ist blendend, und dann haben Sie einen herrlichen font pairing (wer wusste Baskerville und Raleway sah so großartig aus? Sie machte). aber ein problem gibt es: Raleway die lästigen Kleinbuchstaben, zahlen, machen Sie Ihre shopping cart look verwirrend und überfordern den Benutzer.

Dies ist eine ziemlich Banale problem, aber ein Problem, kann man schöne Schriften unbrauchbar, wenn zahlen sind ein wichtiger Teil Ihrer Website; ein Geschäft oder ein analytics-dashboard zum Beispiel. Und dies ist nicht nur ein Problem mit Kleinbuchstaben Ziffern. Nicht-Dicktengleiche Ziffern können ebenso störend bei einem Blick auf eine Liste von zahlen.

Wir werden Blick auf einige Techniken, um dieses problem zu bekämpfen, aber zuerst müssen wir es finden eine schriftart, deren Ziffern, die wir verwenden können, anstatt unsere Haupt-Körper-Schrift. Es gibt keine cut-and-dry-Weg zu finden, Ihre font-twin. Die wichtigsten Merkmale zu suchen sind Gewicht und Breite, so dass Sie können passen Sie auf, dass Sie Ihre ursprüngliche Schrift. Wenn Sie beabsichtigen, verwenden Sie Ziffern, die in mehreren gewichten, versuchen Sie bei Schriftarten, die eine Breite Palette von gewichten, um Ihre Chancen auf, passend zu Ihrem original. Sie können am Ende brauchen eine andere Ziffer schriftart für jedes Gewicht oder unpassende die GEWICHTE der font-Paare, aber das ist gut, denn es gibt in der Tat keine Schrift Polizei.

Hier sind ein paar Google-Font-Paarungen, die passen gut genug, um nicht Auffällig auf kleine Größen:

Methode 0: Wrap ‘em in Spannweiten

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

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

.Ziffer {
font-family: ‘Nunito’, ‘Raleway’, sans-serif;
}
Ihre insgesamt $<span class=”Ziffer”>15</span>.<span class=”Ziffer”>99</span>

Dies ist keine gute Lösung. Nachdem Sie auf hinzufügen, um das markup ist schlecht, und das laden beide Schriften in Ihrer Gesamtheit ist nicht toll, aber wenn Sie nicht über eine Menge von Inhalten und wollen eine einfache Lösung, dann es ist keine Schande.

Was würden wir vorziehen zu finden, ist ein CSS-only-Lösung, trennt die Ziffern von der Nummer der schriftart und lädt diese anstelle von (oder vor der main-font) ohne änderung des HTML. Lesen Sie auf.

Wie font-family funktioniert

Die folgenden Methoden basieren auf der Erstellung einer @font-face-Deklaration, die bezieht sich nur auf unsere bevorzugte Untergruppe von zahlen, und Sie verweist in den font-stack als normal:

body {
font-family: ‘Benutzerdefinierte Ziffer Font’, ‘Main Font’, sans-serif;
}

Durch die Bestellung der subsetted Schrift als erste in Ihrer font-family-Deklaration, die die browser Standardeinstellung und wird fallback auf die nachfolgenden Schriften für die Glyphen nicht verfügbar sind in der ersten. Dies ist ein wirklich wichtiger Unterschied — der browser ist nicht nur die Prüfung, dass der erklärte schriftart verfügbar ist (lokal oder importiert werden via @font-face), aber es ist auch zu prüfen, dass seine Charakter-Karte enthält das gewünschte Zeichen und pass auf die nächste schriftart, wenn Sie nicht auf einer Zeichen-für-Zeichen-basis. Durch die Art und Weise, die spec für die font-matching-Algorithmus ist ein überraschend Interessantes gelesen.

Es ist wichtig zu beachten, dass der browser priorisieren Sie die schriftart über die font Gewicht und Stil, so dass, wenn Sie Teilmenge der zahlen-nur für ein normales Gewicht haben und dann eine Zahl in einen kühnen Stil-element, browser wählen Sie zum anzeigen der normal-Gewicht-Charakter aus der Ziffer Schrift eher als das Fett Gewicht den Charakter der wichtigsten Schriften. Grundsätzlich, wenn Sie dies tun, stellen Sie sicher, Sie tun es für alle, die schriftart, die GEWICHTE werden Sie zeigen zahlen in.

Methode 1: Font Squirrel custom subsetting

Wenn Sie selbst hosten Sie Ihre schriftart-Dateien, anstatt für die Sie von einem hosted service wie Adobe Fonts und Google-Fonts, dann können Sie die Experten-Konfiguration von Font Squirrel ist Webfont-Generator zum erstellen von Dateien, die enthalten nur die Ziffer Teilmenge. Lesen Sie die schriftart Lizenz-Vereinbarung, um sicherzustellen, dass diese Art der manipulation in Ordnung ist, bevor Sie fortfahren.

Die Einstellung der Zeichen-Typ für die Ersatz-schriftart zu Zahlen in der Font-Squirrel-Schnittstelle.

Sobald Sie die subsetted-schriftart-Dateien, können Sie Sie verwenden, wie Sie normalerweise würden. Lesen Sie diesen Artikel für weitere Informationen über @font-face und Datei-Typ, browser-Unterstützung.

@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 man für performance-bewusste, Sie kann auch Teilmenge Ihrer wichtigsten Schriften zum entfernen der Ziffern-Glyphen und rasieren ein paar zusätzliche bytes.

Methode 2: das @font-face-unicode-range subsetting

Die unicode-range-Eigenschaft @font-face wird meist verwendet, um zu deklarieren den Zeichensatz, die schriftart-Dateien enthalten, um zu helfen, den browser entscheiden, ob oder nicht, um die Dateien herunterzuladen; ein großes potential der Leistungssteigerung bei multi-language-sites, die nicht-lateinische Alphabete. Die Kehrseite ist, dass unicode-range schränkt auch die @font-face-Deklaration des angegebenen Bereichs, das heißt, wir können es nur nutzen, um bestimmte Teile des schriftart-Dateien zur Verfügung, für den Einsatz im browser.

@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-Bereich: U+30-39; /* 0-9 /
}

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

Das ist schlimmer für die performance als die bisherige Methode, da die browser noch download-die ganze Schrift-Datei zu verwenden, die Ziffern, aber besser, wenn Sie die Lizenzvereinbarung verbietet eine manipulation der Dateien.

Leider, wir können nicht diese Methode verwenden, um subset fonts bereits geladen, durch einen externen Dienst, aber es kann verwendet werden, auf lokale Schriften:

@font-face {
font-family: ‘Times Ziffer römischen’;
src: local(‘Times New Roman’);
unicode-Bereich: U+30-39; /* 0-9 */
}

Dies ist eine nette Art und Weise optimieren, insbesondere Zeichen Ihrer wichtigsten Schriften, vielleicht subsetting für Sie einfach ein kaufmännisches und-Zeichen oder bevorzugt typografische Anführungszeichen (in dem Fall würden Sie aufgeben müssen, die “Times Ziffer römischen” Wortspiel), ohne performance-Verlust als lokaler Schrift wird einfach ignoriert, wenn es nicht vorhanden ist. Sie können überprüfen, gemeinsames system-font-Verfügbarkeit hier. Und Sie können Queen of the Art Nerds, indem Sie eine Website, die nur gewürdigt werden können, ordnungsgemäß, wenn Sie alle Ihre subsetted Schriftarten heruntergeladen, lokal, premium-esoterisch.

Unterstützung für unicode-Bereich ist ziemlich gut, aber beachten Sie, dass die Teilmenge der schriftart für den gesamten text, wenn es nicht unterstützt wird, also vielleicht nicht machen es zu Papyrus. Oder wenn Sie wirklich wollen, zu verwenden, Papyrus, Sie kann hinterhältig sein und fügen Sie einen anderen web-safe-schriftart, die ersten, so dass nicht unterstützte Browser standardmäßig anstelle von Papyrus:

@font-face {
font-family: ‘Backup-Schrift’;
src: local(‘Arial’);
unicode-Bereich: U+60; /* einfaches schließendes Anführungszeichen, weil ich kann nicht denken, ein harmloser Zeichen */
}

@font-face {
font-family: ‘Papyrus Kaufmännisches und-Zeichen’;
src: local(‘Papyrus’);
unicode-Bereich: U+26; /* & */
}

body {
font-family: ‘Backup-Font’, ‘Papyrus Kaufmännisches und-Zeichen’, ‘Main Font’, sans-serif;
}

Methode 3: Google Fonts text unterteilen

Die Google Fonts API kommt mit ein paar praktischen zusätzlichen Optionen, um Hilfe der Optimierung, indem Sie nur bestimmte schriftart GEWICHTE, Formate und Alphabete (die Teilmenge der parameter akzeptiert eine Liste von Alphabete wie Griechisch,Kyrillisch und nicht in einem unicode-Bereich, leider), aber es gibt auch eine wenig bekannte “beta” – parameter namens text, die angeblich für die Verwendung in Titeln und logos, aber funktioniert genauso gut für unseren Zweck:

@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 ist das! So elegant!

Der parameter text kann jede beliebige UTF-8-Zeichen, aber stellen Sie sicher, dass URL-Kodieren, wenn Sie nicht alphanumerisch. Das einzige mögliche Problem bei dieser Methode ist, dass wir nicht erstellen Sie einen benutzerdefinierten Namen mit @font-face, so dass, wenn der Benutzer bereits die Teilmenge schriftart auf Ihrem system zu verwenden, wird die schriftart in seiner Gesamtheit.

Ich habe nicht in der Lage zu finden, alle anderen gehosteten schriftart Dienstleistungen anbieten, die diese Ebene der Granularität für die Untergruppen aber Kommentar unten, wenn Sie kommen über eine.

Ein paar Anwendungsfälle

Live-Demo
Live-Demo
Live-Demo
Live-Demo