Delsett Tall slik De er like Awesome som Resten av Innholdet Ditt

0
16

Du legger siste finpuss på den nye millioner-dollar-idé — eksemplaret er perfekt, farge ordningen er blendende, og du har funnet en strålende skrift sammenkobling (som visste Baskerville og Raleway så så godt sammen? Du gjorde.) men det er ett problem: Raleway er plagsomme små tall gjøre din shopping cart se forvirre og overvelde brukeren.

Dette er en ganske hverdagslig problem, men et problem som kan lage vakre skrifttyper ubrukelig hvis tall er en viktig del av nettstedet; en butikk eller en analytics-dashbordet for eksempel. Og dette er ikke bare et problem med små tall. Ikke-skalerbare tall kan være like forstyrrende når skotter på en liste av tall.

Vi kommer til å se på noen teknikker for å bekjempe dette problemet, men først må vi finne en skrift som tall som vi kan bruke i stedet for vårt viktigste organ skrift. Det er ingen klipp-og-tørre måte å finne ditt skrift twin. De viktigste egenskapene for å søke etter er vekt og bredde, slik at du kan tilpasse det til den opprinnelige skrift. Hvis du har tenkt å bruke tall på flere vekter, prøv å se på skrifter som har et bredt spekter av vekter opp dine sjanser til å matche den originale. Du kan ende opp med å måtte et annet tall skrift for hvert vekt eller mismatching vektene på skriften par, men det er fint fordi det er faktisk ingen skrift politiet.

Her er et par Google-Skrift motstandere som matcher godt nok til å ikke være merkbar på små størrelser:

Metoden 0: Pakk ’em i spenn

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

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

.tall {
font-family: ‘Nunito’, ‘Raleway’, sans-serif;
}
Din totale kommer til $<span class=”tall”>15</span>.<span class=”tall”>99</span>

Dette er ikke en god løsning. Etter å ha for å legge til markering er dårlig, og legger begge skrifter i sin helhet er ikke stor, men hvis du ikke har mye innhold, og som ønsker en enkel løsning, så det er ingen skam i det.

Hva vi ønsker å finne er en CSS-eneste løsningen som isolerer tallordene av antall skrift og laster dem i stedet for (eller før den viktigste skrift) uten å endre HTML. Les videre.

Hvordan font-family fungerer

Følgende metoder er avhengige av å skape en @font-face erklæring som bare henviser til våre foretrukne delsett av tall og referanser dem i skrift stabelen som vanlig:

body {
font-family: “Tilpasset Tall Skrift’, ‘Main Skrift’, sans-serif;
}

Ved bestilling av subsetted skrift først i font-family-erklæringen, vil nettleseren standard til det og vil tilbakefall til den påfølgende skrifter for tegn som ikke er tilgjengelige i den første. Dette er en veldig viktig forskjell — nettleseren er ikke bare å kontrollere at det som erklærte skrift er tilgjengelig lokalt (eller importert via @font-face), men det er også kontrollere at dens karakter kartet inneholder den ønskede karakter, og vil passere inn i neste skrift hvis det ikke gjør det, på en tegn-for-tegn basis. Forresten, spec for font-matchende algoritme er en overraskende interessant lese.

Det er viktig å merke seg at nettleseren vil prioritere skrifttype over skriften vekt og stil, så hvis du delsett av tall for bare en normal vekt, og så får du et nummer i en fet stil element, vil nettleseren velge å vise normal vekt karakter fra tallordet skrift snarere enn fet-vekt karakter av de viktigste skrift. I utgangspunktet, hvis du gjør dette, sørg for at du gjør det for alle skrift vekter du vil vise numrene.

Metode 1: Font Ekorn tilpasset underinnstilling

Hvis du selv-vert skrift-filer i stedet for å tjene dem fra en vertsbasert tjeneste, for eksempel Adobe Skrifter eller Google-Skrifter, kan du bruke den sakkyndige konfigurasjon av Skrift Ekorn er Webfont Generator for å opprette filer som bare inneholder tall delsett. Les skrift er lisensavtalen for å sørge for at denne type manipulering er i orden før du fortsetter.

Å sette Karakter-Type for den nye skriften til Tall i Skrift Ekorn grensesnitt.

Når du har subsetted font filer, kan du bruke dem som du normalt ville. Sjekk ut denne artikkelen for mer informasjon om @font-face og filtype nettleser støtter.

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

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

Hvis du blir performance-bevisst, kan du også delsett din viktigste skrift til å fjerne sine tall tegn og raka av seg et par ekstra byte.

Metode 2: @font-face unicode-området underinnstilling

Unicode-utvalg eiendom @font-face er for det meste brukt til å erklære karakter angi skrift-filer inneholde for å hjelpe leseren avgjøre hvorvidt eller ikke å laste ned filer; et stort potensial ytelsesøkning for multi-språk nettsteder som bruker ikke-latinske alfabeter. Baksiden er at unicode-utvalg også begrenser @font-face erklæring til det angitte området, noe som betyr at vi kan bare bruke det til å gjøre visse deler av skriften filer tilgjengelig for bruk i nettleseren.

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

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

Dette er verre for ytelse enn den forrige metoden som nettleseren har fortsatt å laste ned den hele skrift-fil til å bruke tall, men å foretrekke hvis lisensavtalen forbyr manipulering av filer.

Dessverre kan vi ikke bruke denne metoden til å delsett skrifter allerede lagt ved en ekstern tjeneste, men det kan brukes på lokale skrifter:

@font-face {
font-family: ‘Times Tall Roman’;
kilde: lokal(‘Times New Roman’);
unicode-område: U+30-39; /* 0-9 */
}

Dette er en fin måte for tilpasning bestemt tegn av dine viktigste skrift, kanskje kategorisering for bare en ligatur eller foretrukket krøllete sitater (i hvilket tilfelle du ville ha til å gi opp “Ganger-Tall Roman” ordspill), med ingen ytelse tap som den lokale skrift vil bare bli ignorert hvis det ikke eksisterer. Du kan sjekke felles system skrift tilgjengelighet her. Og du kan bli Dronning av Typen Nerder ved å lage et nettsted som kan bare bli verdsatt på riktig måte hvis du har alle sine subsetted skrifter som er lastet ned lokalt, premium esoterisk.

Støtte for unicode-serien er ganske bra, men merk at delsett skrift skal brukes for all tekst hvis den ikke støttes, så kanskje ikke gjør det Papyrus. Eller hvis du virkelig ønsker å bruke Papyrus, du kan være sleipe og legge til en annen web-safe skrift først slik at ikke støttes nettlesere automatisk satt til det i stedet for Papyrus:

@font-face {
font-family: ‘Backup Skrift’;
kilde: lokal(‘Arial’);
unicode-område: U+60; /* backtick fordi jeg ikke kan tenke på en mer uskyldige tegn */
}

@font-face {
font-family: ‘Papyrus-Tegn’;
kilde: lokal(‘Papyrus’);
unicode-område: U+26; / * og */
}

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

Metode 3: Google Skrifter tekst underinnstilling

Google Fonts API kommer med noen praktiske ekstra valg for å hjelpe optimalisering ved å angi bare bestemt skrift vekter, stiler og alfabeter (delsett parameteren tar en liste av alfabeter som gresk,kyrillisk og ikke er et unicode-serien, dessverre), men det er også en lite kjent “beta” – parameteren kalles tekst som er tilsynelatende for bruk i titler og logoer men fungerer like godt for vårt formål:

@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! Så elegant!

Teksten parameteren kan ta noen UTF-8 tegn, men sørg for å URL kode dem hvis de ikke er alfanumerisk. Den eneste mulige problemet med denne metoden er at vi ikke opprette en egendefinert navn med @font-face, så hvis brukeren allerede har delsett skrift på deres system, det vil bruke som skrift i sin helhet.

Jeg har ikke vært i stand til å finne noen andre som vert skrift tjenester som tilbyr dette nivået av detaljer for kategorisering, men gjøre kommentar nedenfor hvis du kommer over en.

Noen bruker tilfeller

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