4 trinn for å bruke variable fonter

Sep 14, 2025

hvordan

Variable fonts: The outlines of various weights and style of a single font family in magenta, emblazoned with the words 'Get versatile with variable fonts' in a bold, sans serif font.

[1. 3]

(Bildekreditt: Fremtid)

Variable fonter Aktiver font designere å definere type variasjoner i selve skrifttypen, slik at en skriftfil kan fungere som flere skrifter. Standardfonter er gruppert i font-familier som inneholder flere separate skriftfiler, som hver representerer en annen stil, for eksempel en lettvekt eller en dristig vekt. Variable skrifttyper inneholder all denne samme informasjonen i en enkelt skriftfil.

Ved hjelp av Source Sans Pro som et eksempel, utgjør den variable versjonen av skrifttypen omtrent 394KB og kommer i et bredt spekter av vekter. Hvis vi skulle bruke disse fontvektene individuelt som standard skriftfiler, er de i gjennomsnitt 234kb hver - noe som resulterer i en kombinert filstørrelse på ca. 1856KB. Selvfølgelig antar denne beregningen at alle fontvektene eksisterer individuelt som en standard skrift, som de ikke gjør. (Selv om du er ute etter bare vanlige fonter, sjekk ut vårt innlegg på Beste gratis skrifttyper tilgjengelig.)

Hvis vi fjerner skriftene som ikke eksisterer som standard skrift, er den kombinerte filstørrelsen fortsatt nesten tre ganger størrelsen på variabel skrift og med betydelig færre stiler. Selv om du bare ville ha de dristige og vanlige versjonene, vanlige i mange webprosjekter, er to versjoner av standard kilde sans pro font fortsatt større enn en enkelt variabel skrift. Hva dette demonstrerer er at med variable fonter har vi potensial til å lage massive besparelser på båndbredde uten å gå på kompromiss med våre design og kreativitet.

A comparison of the filesize of a range of font weights between a standard and a variable font – the standard font family totals 1864kb compared to 394kb for the variable font. — En sammenligning av filstørrelsene på en rekke fontvekter mellom standard og variabel versjon av Font Source Sans Pro (Bildekreditt: Mandy Michael)

Variabel skrifttyper arbeider ved å interpolere mastervariasjonene langs en akse, i hovedsak konstruere nye punkter i mellom. Dette betyr at du kan sette skriftvekt på vilkårlig poeng langs aksen som presenterer et mye større antall stiler og variasjoner. Videre er det fordi de variable skrifttyper kan bli interpolert at vi er i stand til å animere mellom hver variasjon, slik at glatte overganger sier en tynn vekt til en dristig vekt - noe vi aldri har vært i stand til å oppnå før.

Det som gjør variable fonter enda mer spennende, er at designere ikke er begrenset til bare en enkelt akse. Variable fonter kan inneholde mange forskjellige akser som representerer en rekke forskjellige stiler. Dette kan inkludere kondensert, kursiv, optisk størrelse eller andre mer kreative eller egendefinerte alternativer.

Vil du plassere fonter på et nytt nettsted? For webdesignressurser, gå over til vårt beste Nettstedbygger Roundup og plukke på toppen Web Hosting. Tjenester. Eller for en lagringsoppgradering, sjekk ut disse skylagring alternativer.

01. Forstå akser i variable fonter

A chart showing a single variable font transforming along two axes: weight and width. It ranges from low weight and narrow in the bottom left corner to high weight and thick at the top right. — Ser på interpolering av en variabel skrift på tvers av en vekt og bredde Akse avslører rekkevidden av tilpasning som er tilgjengelig (Bildekreditt: Mandy Michael)

Bruke variable skrifttyper i våre CSS er svært lik hvordan vi normalt ville bruke skrifttyper på nettet: Bruke @ font-face at-regel . Vi må imidlertid først forstå de forskjellige typer akser i en variabel skrift som dette bestemmer hvilke CSS-egenskaper vi bruker.

Det er to typer akser i en variabel skrift: en registrert akse og en tilpasset akse. En registrert akse refererer til en akse som er vanlig nok til at det var verdt å standardisere. Det er for tiden fem registrerte akser; Vekt, bredde, skrå, kursiv og optisk størrelse, og disse blir ofte kartlagt til eksisterende CSS-egenskaper, for eksempel skriftvekt.

Tilpassede akser er definert av skrifttype designere, kan være enhver form for variasjon og krever bare en fire-brev identifikator i fontfilen, som kan refereres til i CSS.

02. Bruk en registrert akse

A range of variable font weights along an axis from light (200) to black (900). — Vektvariasjoner er definert på en akse, fra lys (200) til svart (900) (Bildekreditt: Mandy Michael)

Når det gjelder en registrert akse, vil vi sørge for at vi bruker alle tilknyttede CSS-egenskaper, for eksempel skrifttype eller skrifttype.

Vi kan sette opp våre skrifttyper ved hjelp av @ font-face at-regel som vi normalt ville Endringen er i hvordan vi definerer variasjonene for beskrivere som font-vekt, skrifttype-strekk og skrifttype. Tidligere ville vi ha satt en skriftvekt på 200 og definerte dette som lysversjonen av fonten, vi ville da sette opp en annen font ansiktsblokk for den dristige versjonen og den vanlige versjonen til vi hadde alle vektene som var nødvendig for designet. Med variable fonter trenger vi bare en enkelt font ansiktsblokk. Så i stedet for å bruke flere tilfeller, spesifiserer vi en rekke verdier som samsvarer med minimums- og maksimumsverdiene som er definert på skriftsaksen.

 @ font-face {
Font-Family: "Source Sans variable";
SRC: URL ("Source-Sans-Variable.woff") format ("Woff-variasjoner");
font-vekt: 200 700;
}

I dette eksemplet setter vi en fontvekt på 200 til 700. Når vårt utvalg er definert, kan vi velge et hvilket som helst nummer innenfor det området som vår skriftvekt, for eksempel 658. Det er viktig at du stiller fontvektsområdet som 200 til 700 og Prøv deretter å definere en vekt på 900, selv om fonten har en 900 vekt definert i sin akse, vil du ikke kunne bruke den. Området definerer hva du har tilgang til i din CSS.

03. Sett opp egendefinerte akser

Siden ingen eksisterende CSS-egenskaper vil eksistere når du bruker en tilpasset akse, må vi benytte seg av en ny CSS-egenskap som kalles skriftvarigningsinnstillinger. Dette vil gjøre det mulig for oss å definere så mange navngitte og tilpassede akser som vi trenger.

 h1 {
Font-Family: 'Min variable font';
Font-variasjonsinnstillinger: 'WGHT' 375 'INLI' 88;
}

I eksemplet her refererer wght til den registrerte vektens registrerte akse og Inli refererer til en tilpasset akse som heter inline, hver med en tilhørende tallverdi som tilsvarer et punkt langs variasjonsaksen. Mens du kan referere til en registrert akse som en verdi for font-variasjonsinnstillinger, anbefales det at du bruker deres kartlagte CSS-egenskaper i stedet.

For å sikre støtte i de eldre nettleserne kan vi bruke Fallback-fonter for ikke-støttede nettlesere ved å benytte seg av CSS-funksjonsdeteksjon.

 h1 {
  Font-familie: "Source Sans", Sans-serif;
  font-vekt: 700;
}

@Supports (Font-Variation-Settings: Normal) {
h1 {
 Font-familie: "DECOVAR";
 Font-variasjonsinnstillinger: "Inli" 88;
 }
}

Ved å kontrollere støtte for skrifttype-variasjonsinnstillinger, kan vi inkludere våre variable skrifttyper i støttene CSS-blokken, slik at de bare vil bli brukt i nettlesere som kan støtte variable fonter - med våre standardfonter som brukes i de ikke-støttede nettleserne.

04. Kombinere Javascript og variable fonter

A range of As rendered in a variety of font weights and sizes, showing the smooth transitions offered by variable fonts. — Variable fonter gjør det mulig for jevn overganger fra, si en tynn til en dristig vekt; Dette lar deg lage glatte transformasjoner som bruker JavaScript-variabler (Bildekreditt: Mandy Michael)

Vi kan benytte seg av JavaScript-hendelser for situasjoner der vi ønsker mer finjustert kontroll eller forandre skrifttypen basert på hendelser som vi ikke kan få tilgang til med CSS alene. Et enkelt eksempel vil matche vår skriftvekt til størrelsen på vår visningsport - som visningsporten blir mindre, blir fontvekten tyngre.

For å skape væskeskalaen må vi justere to sett med verdier og enheter - fontvekten og visningsstørrelsen. Vi kan få tilgang til den nåværende visningsportbredden ved hjelp av Window.Innerwidth og opprett en ny prosentbasert skala ved å konvertere den til en rekkevidde på 0-0.99. Ved å inkludere minimums- og maksimumsvisningsportstørrelsene kan vi kontrollere effekten av effekten.

 var viewportscale =
(window.Innerwidth - Minwindowsize) / (maxwindowsize - Minwindowsize);

Vi bestemmer deretter fontvekten basert på vår Viewport-størrelse.

 var fontweightscale = viewportscale * (Minfontweight - MaxFontWeight) + MaxFontWeight;

Ved hjelp av CSS-egendefinerte egenskaper kan vi bruke vår JavaScript-verdi for å oppdatere fontvekten i våre CSS.

 P.Style.SetProperty ("- Weight", fontweightscale);

Når dette er kombinert til en funksjon og festet til Endre størrelse, kan vi oppdatere fontvekten basert på den nye størrelsen på vinduet.

Med denne grunnleggende tilnærmingen kan vi endre typografien vår basert på alle slags hendelser og erfaringer. Hvor visningsporten er bred, kan vi ha mer detaljert; Omvendt, når det er mindre og i et mer begrenset rom, kan vi se på å redusere skriftbredden eller øke vekten, noe som gir bedre kontroll over innholdet og typografien når det gjelder lesbarhet, brukervennlighet og design.

Du kan Se koden for dette på codepen.

Denne artikkelen ble opprinnelig publisert i utgave 318 av nett , verdens bestselgende magasin for webdesignere og utviklere. Abonner på nettet her .

Oppdag mer om variable fonter på Generate CSS

An image promoting Bianca Berning's talk 'The future of type' at Generate CSS on 26 September. — (Bildekreditt: Getty / Bianca berning / fremtid)

I hennes snakk om å generere CSS, foregår den fokuserte CSS-konferansen for webdesignere 26. september 2019 på Rich Mix, London, Bianca Berning, hvordan variable skrifttyper kan skape nye muligheter for det skrevne ordet innenfor tradisjonelle medier, så vel som nye, immersive Erfaringer, som AR, VR, og blandet virkelighet.

Hvis du vil fange dette og andre gode samtaler, er det verdt å snappe opp billettene dine nå. Hvis du tar deg din før klokken 5.00 på 15. august, kan du spare £ 50, betale bare £ 199 + mva. Kjøp din billett nå !

Relaterte artikler:

3 måter tech er å endre type
Kom i gang med variable fonter i CSS
Forvandle din type online med variable fonter

4 trinn for å bruke variable fonter

01. Forstå akser i variable fonter

02. Bruk en registrert akse

03. Sett opp egendefinerte akser

04. Kombinere Javascript og variable fonter

Oppdag mer om variable fonter på Generate CSS

hvordan - Mest populære artikler

Lag en scene med Renderman for Maya

Hvordan lage en Alexa ferdighet for nettstedet ditt

Bruk Marmoset Toolbag til presentere modeller i VR

Reglene for responsiv webtypografi

Mal et uttrykksfulle stilleben i akryl

Hvordan lage deilige teksturer med blyanter

Lag interaktive diagrammer i ionisk 2

Opprett 3D-branneffekter

Kategorier