Subset Cijfers dus Ze zijn zo goed als de Rest van Uw Content

0
19

Je legt de laatste hand aan uw nieuwe miljoen-dollar-idee — uw exemplaar is perfect, uw kleurenschema is oogverblindend, en u hebt gevonden een heerlijke font koppeling (die wist Baskerville en Raleway zag er zo goed bij elkaar passen? Je deed.) maar er is één probleem: Raleway de vervelende kleine aantallen maken van uw winkelwagentje te kijken verwarrend en overweldigen de gebruiker.

Dit is een vrij alledaags probleem, maar een probleem dat kunnen mooie lettertypes onbruikbaar als er cijfers zijn een belangrijk onderdeel van uw site; een winkel of een analytics dashboard voor een voorbeeld. En dit is niet alleen een probleem met kleine cijfers. Niet-monospaced cijfers kan even storend zijn als u een blik werpt op een lijst van nummers.

We gaan kijken naar een paar technieken om dit probleem te bestrijden, maar eerst moeten we op zoek naar een lettertype waarvan de cijfers die we kunnen gebruiken in plaats van onze belangrijkste lichaam lettertype. Er is geen knip-en-droge manier van het vinden van uw lettertype twin. De belangrijkste kenmerken van de te zoeken zijn het gewicht en de breedte, zodat u kunt vergelijken met die van uw originele lettertype. Als u van plan bent om cijfers in meerdere gewichten, kunt u lettertypen die een breed scala van gewichten om je kansen op die overeenkomen met uw originele. Je hoeft een ander cijfer lettertype voor elk gewicht of mismatching de gewichten van het lettertype paren, maar dat is prima, want er zijn in feite geen lettertype politie.

Hier zijn een paar Google-Font-paren die match goed genoeg om niet merkbaar bij de kleine maten:

Methode 0: Pak ’em in overspant

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

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

.cijfer {
font-family: ‘Nunito’, ‘Raleway’, sans-serif;
}
Uw totaal neerkomt op $<span class=”cijfer”>15</span>.<span class=”cijfer”>99</span>

Dit is niet een goede oplossing. Toe te voegen aan de markup is slecht, en het laden van zowel lettertypen in hun geheel is niet groot, maar als je niet veel van de inhoud en wilt u een eenvoudige oplossing, dan is er geen schaamte in.

Wat we liever te vinden is een CSS-enige oplossing die isoleert de cijfers van het aantal lettertype en laadt ze in plaats van (of voor het grootste lettertype) zonder dat u de HTML. Lees verder.

Hoe font-family werkt

De volgende methoden berusten op het creëren van een @font-face verklaring heeft alleen betrekking op het door ons gewenste deelverzameling van cijfers en referenties hen in de font stack als normaal:

body {
font-family: ‘Aangepaste Cijfer Lettertype’, ‘Main Lettertype’, sans-serif;
}

Door het bestellen van de subsets lettertype eerste in uw font-family verklaring, zal de browser de standaard en het terugvallen op de volgende lettertypen voor de glyphs die niet beschikbaar zijn in de eerste. Dit is een heel belangrijk onderscheid — de browser is niet alleen te controleren of het opgegeven lettertype beschikbaar (lokaal of geïmporteerd via @font-face), maar het is ook de moeite die de personage kaart bevat de gevraagde karakter en zal overgaan op de volgende lettertype als dat niet zo is, op karakter-per-karakter. Door de manier, de specificatie voor de font-matching algoritme is een verrassend leuk zijn om te lezen.

Het is belangrijk op te merken dat de browser zal de prioriteit van het lettertype familie over de dikte van de letters en stijl, dus als u een subset van de cijfers voor alleen een normaal gewicht en dan een nummer in een vet-style element, de browser zal kiezen voor de mensen met een normaal gewicht karakter van het cijfer lettertype dan de bold-gewicht karakter van de belangrijkste lettertype. In principe, als je dit doet, zorg ervoor dat u het doen voor alle lettertype-gewichten je nummers in.

Methode 1: Font Squirrel aangepaste opties

Als je zelf host uw lettertype-bestanden in plaats van het dienen van hen vanaf een gehoste service, zoals Adobe-Lettertypen of Google Fonts, dan kunt u gebruik maken van de deskundige configuratie van Font Squirrel ‘ s Webfont Generator om bestanden te maken die alleen bestaan uit de cijfers subset. Lees het lettertype van de licentie-overeenkomst om te zorgen dat dit soort manipulatie in orde is voordat u verdergaat.

Het instellen van het Type Teken is voor de vervanging van de font-Nummers in het Lettertype Eekhoorn interface.

Zodra u de subsets lettertype-bestanden, kunt u ze gebruiken als je normaal zou doen. Check dit artikel voor meer informatie over @font-face en bestand type browser ondersteuning.

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

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

Als u prestatie-bewuste, kunt u ook subset uw belangrijkste lettertype te verwijderen zijn cijfer glyphs en scheren een paar extra bytes.

Methode 2: de @font-face unicode-reeks opties

De unicode-reeks eigendom van @font-face wordt meestal gebruikt voor het declareren van de tekenset voor de lettertype-bestanden bevatten om de browser te beslissen of het wel of niet om de bestanden te downloaden; een grote potentiële performance boost voor de multi-language sites die gebruik maken van niet-latijnse alfabetten. De flip-side is dat unicode-bereik beperkt ook de @font-face verklaring naar het opgegeven bereik, wat betekent dat we alleen kunnen gebruiken om bepaalde delen van het lettertype bestanden die beschikbaar zijn voor gebruik in de browser.

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

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

Dit is slechter voor de prestaties dan de vorige methode als de browser toch heeft om te downloaden of de hele lettertype bestand gebruiken om de cijfers, maar de voorkeur als de licentie-overeenkomst zijn niet toegestaan manipulatie van de bestanden.

Het is jammer dat we geen gebruik maken van deze methode om een subset lettertypen al geladen door een externe dienst, maar het kan worden gebruikt op de lokale lettertypen:

@font-face {
font-family: ‘Times Cijfer Roman’;
src: lokale(‘Times New Roman’);
unicode-bereik: U+30-39; /* 0-9 */
}

Dit is een nette manier om bepaalde tekens van uw belangrijkste lettertype, misschien opties voor slechts een teken of de voorkeur gekrulde aanhalingstekens (en in dat geval zou je op te geven van de “Times Romeinse Cijfer” woordspeling), zonder verlies aan prestaties als de lokale lettertype zal gewoon worden genegeerd als het niet bestaat. U kunt controleren common systeem lettertype hier de beschikbaarheid. En u kunt Koningin van het Type Nerds door het maken van een site die alleen kan worden gewaardeerd goed als u hebt alle subsets gedownloade lettertypen lokaal, premium esoterische.

Ondersteuning voor unicode-range is vrij goed, maar let op dat de subset lettertype zal worden gebruikt voor alle tekst als het niet wordt ondersteund, dus misschien maak het niet Papyrus. Of als je echt wilt om het gebruik van Papyrus, kunt u worden sneaky en voeg een nieuwe web-safe font eerste dus dat niet-ondersteunde browsers zijn standaard in plaats van Papyrus:

@font-face {
font-family: ‘Back-up Lettertype’;
src: lokale(‘Arial’);
unicode-bereik: U+60; /* accent-achterover, want ik kan niet denken van een meer onschuldige karakter */
}

@font-face {
font-family: ‘Papyrus-Teken’;
src: lokale(‘Papyrus’);
unicode-bereik: U+26; /* & */
}

body {
font-family: ‘Back-up Lettertype’, ‘Papyrus-Teken’, ‘Main Lettertype’, sans-serif;
}

Methode 3: Google Fonts tekst opties

De Google Fonts API wordt geleverd met een aantal handige extra opties voor de steun optimalisatie door te geven alleen bepaald lettertype gewichten, stijlen en alfabetten (de subset parameter een lijst van alfabetten, zoals grieks,cyrillisch en niet een unicode-reeks, helaas), maar er is ook een weinig bekende “beta” – parameter met de naam tekst die ogenschijnlijk voor gebruik in titels en logo ‘ s, maar werkt net zo goed voor onze doel:

@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;
}

Zo simpel is het! Zo elegant!

De parameter van de tekst kan elk UTF-8-tekens, maar zorg ervoor dat URL coderen als ze niet alfanumeriek. Het enige mogelijke probleem met deze methode is dat we niet een aangepaste naam maken met @font-face, dus als de gebruiker al heeft de subset lettertype op hun systeem, zal het gebruik van dat teken in zijn geheel.

Ik heb niet in staat geweest om alle andere gehoste lettertype diensten die bieden deze mogelijkheden voor opties maar doe reactie hieronder als je er een tegenkomt.

Een enkele use cases

Live Demo
Live Demo
Live Demo
Live Demo