Delmängd Siffror så att De är lika Fantastisk som Resten av Ditt Innehåll

0
24

Du lägger den sista touchen på din nya miljoner-dollar-idé — ditt exemplar är perfekt, ditt färgschema är bländande, och du har hittat en härlig font ihopkoppling (som visste Baskerville och Raleway såg så bra ihop? Du gjorde.) men det finns ett problem: Raleway är irriterande små bokstäver gör din kundvagn ser förvirrande och överväldiga användaren.

Detta är en ganska vardagliga problem, men ett problem som kan göra vackra typsnitt oanvändbar om siffrorna är en viktig del av din webbplats, en butik eller ett analytics-instrumentpanel till exempel. Och detta är inte bara ett problem med gemena siffror. Icke-monospaced siffror kan vara lika störande när en blick på en lista över tal.

Vi kommer att titta på några metoder för att bekämpa detta problem, men först måste vi hitta ett teckensnitt vars siffror som vi kan använda i stället av våra viktigaste organ teckensnitt. Det finns ingen cut-and-torr sätt att hitta ditt typsnitt tvilling. De viktigaste egenskaperna för att söka efter är vikt och bredd så att du kan matcha din ursprungliga teckensnittet. Om du tänker använda siffror på flera vikter, försök att titta på teckensnitt som har ett brett utbud av vikter för att dina chanser till att matcha din ursprungliga. Du kan sluta upp att behöva en annan siffra teckensnitt för varje vikt eller obalansen vikter font par, men det är bra att det finns i själva verket ingen font polisen.

Här är några Google Font lottning som matchar tillräckligt bra för att inte synas vid små storlekar:

Metod 0: Wrap ’em i spännvidder

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

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

.siffran {
font-family: ‘Nunito’, ‘Raleway’, sans-serif;
}
Din totala gäller att $<span class=”siffra”>15</span>.<span class=”siffra”>99</span>

Detta är inte en bra lösning. Med att lägga till kod som är dåligt, och laddar både teckensnitt i sin helhet är inte stor, men om du inte har mycket innehåll och vill ha en enkel lösning, då finns det ingen skam i det.

Det vi vill hitta är en CSS-bara en lösning som isolerar siffror för antalet teckensnitt och laddar dem i stället för (eller innan font) utan att behöva ändra i HTML. Läs på.

Hur font-family fungerar

Följande metoder förlita sig på att skapa en @font-face deklarationen, som bara hänvisar till vårt föredragna delmängd av siffror och referenser dem i teckensnittet stack som vanligt:

body {
font-family: ‘Anpassad Siffra Typsnitt’, ‘Main Typsnitt’, sans-serif;
}

Genom att beställa subsetted typsnitt först i din font-family förklaring, webbläsaren kommer som standard och det kommer återgång till den efterföljande teckensnitt för tecken som inte finns i den första. Detta är en riktigt viktig skillnad — webbläsaren är inte bara att kontrollera att de angivna teckensnittet är tillgängligt (lokalt eller importeras via @font-face), men det är också att kontrollera att dess karaktär karta innehåller de begärda karaktär och kommer att passera in i nästa teckensnitt om det inte, på ett tecken för tecken grund. Förresten, spec för font-matchande algoritm är en förvånansvärt intressant att läsa.

Det är viktigt att notera att webbläsaren kommer att prioritera typsnitt familj över teckensnitt vikt och stil, så om du delmängd av siffror för bara en normal vikt och sedan har en rad inne i en fet-stil element, webbläsaren kommer att välja att visa normal-vikt karaktär från siffran font snarare än fet-vikt karaktär av de viktigaste teckensnitt. I grund och botten, om du gör detta, se till att du gör det för alla teckensnitt vikter du ska visa siffror på.

Metod 1: Font Squirrel anpassad delmängder

Om du själv är värd för din font-filer istället för att servera dem från en tjänst som Adobe Typsnitt eller Teckensnitt för Google, då kan du använda expert konfiguration av Font Squirrel är Webfont Generator för att skapa filer som bara innehåller siffran delmängd. Läs font licensavtalet för att se till att denna typ av manipulation är okej innan du fortsätter.

Inställning av Typ av Tecken för att ersätta teckensnitt till Nummer i Font Squirrel-gränssnitt.

När du har subsetted font-filer, kan du använda dem som du normalt skulle göra. Kolla in den här artikeln för mer information om @font-face och filtyp webbläsare stöd.

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

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

Om du är resultat-medvetna, du kan också delmängd din huvudsakliga teckensnitt för att ta bort sin siffra glyfer och raka av ett fåtal extra bytes.

Metod 2: @font-face-unicode-olika delmängder

Unicode-utbud egendom av @font-face är oftast används för att förklara den teckenuppsättning teckensnitt filer innehålla för att hjälpa webbläsaren besluta huruvida eller inte att ladda ner filer; en stor potential att öka prestanda för flerspråkiga webbplatser som använder icke-latinska alfabet. Flip-sidan är att unicode-rad också begränsar @font-face deklarationen till det angivna intervallet, vilket innebär att vi bara kan använda den för att göra vissa delar av det teckensnitt som finns tillgängliga för användning i webbläsaren.

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

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

Detta är mycket sämre prestanda än den tidigare metoden som webbläsaren har fortfarande med att ladda ner hela font-fil för att använda siffror, men att föredra om licensavtalet inte tillåter manipulering av filer.

Tyvärr, vi kan inte använda denna metod för att delmängd teckensnitt som redan har lästs in av en extern tjänst, men det kan användas på lokala teckensnitt:

@font-face {
font-family: ‘Times Siffra Roman’;
src: lokal(‘Times New Roman’);
unicode-räckvidd: U+30-39; /* 0-9 */
}

Detta är ett snyggt sätt att pyssla med ett visst tecken av dina viktigaste teckensnitt, kanske delmängder för bara ett och-tecken eller rekommenderad typografiska citattecken (i vilket fall du skulle behöva ge upp “Times Siffra Roman” ordvitsen), utan resultat förlust som den lokala font bara kommer att ignoreras om det inte existerar. Du kan kontrollera gemensamt system font tillgänglighet här. Och du kan bli Drottning av Typ Nördar genom att göra en webbplats som bara kan uppskattas på rätt sätt om du har alla sina subsetted teckensnitt som har hämtats lokalt, premium esoteriska.

Stöd för unicode-utbud är ganska bra, men observera att delmängd teckensnitt kommer att användas för all text om det inte stöds, så kanske inte gör det Papyrus. Eller om du verkligen vill använda Papyrus, du kan vara luriga och lägga till en annan webbsäkra font först så att webbläsare som inte stöds kommer som standard att det i stället för Papyrus:

@font-face {
font-family: ‘Backup Font’;
src: lokal(‘Arial’);
unicode-räckvidd: U+60; /* backtick eftersom jag inte kan tänka mig en mer ofarlig tecken */
}

@font-face {
font-family: ‘Papyrus-Tecken’;
src: lokal(‘Papyrus’);
unicode-räckvidd: U+26; / * och */
}

body {
font-family: ‘Backup Typsnitt’, ‘Papyrus-Tecken’, ‘Main Typsnitt’, sans-serif;
}

Metod 3: Google Teckensnitt delmängder text

Google Fonts API kommer med några praktiska extra val till stöd för optimering genom att ange endast vissa teckensnitt vikter, stilar och alfabet (delmängd parameter tar en lista med bokstäver som grekiska,kyrilliska och inte en unicode-sortiment, tyvärr), men det är också lite kända “beta” – parameter som kallas för text som är skenbart för användning i titlar och logotyper men fungerar lika bra för vårt syfte:

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

Så enkelt är det! Så elegant!

Texten parameter kan ta någon UTF-8-tecken, men se till att URL-koda dem om de inte är alfanumeriska. Det enda problemet med denna metod är att vi inte skapa ett anpassat namn med @font-face, så om användaren redan har delmängd teckensnitt på deras system, kommer det använda typsnittet i sin helhet.

Jag har inte kunnat hitta någon annan värd font tjänster som erbjuder denna detaljnivå för delmängder men inte kommentera nedan om du kommer över en.

Ett par användningsfall

Live Demo
Live Demo
Live Demo
Live Demo