4 vaiheet muuttuvien fonttien käyttämiseen

Sep 14, 2025

Miten tehdään

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.

(Kuva luotto: tulevaisuus)

Muuttuvat fontit mahdollistavat fonttisi suunnittelijat määrittämään tyypin vaihtelut fontin sisällä, mikä mahdollistaa yhden fonttitiedoston toimivan kuten useita fontteja. Vakiofontit on ryhmitelty fonttiperheisiin, jotka sisältävät useita erillisiä fonttitiedostoja, jotka kukin edustavat eri tyyliä, esimerkiksi kevyt tai lihavoitu paino. Muuttuvat fontit sisältävät kaikki nämä tiedot yhdellä fonttitiedostossa.

Lähde Sans Pro -ohjelmana esimerkkinä fonttien muuttuja versio on noin 394 kt ja se tulee monenlaisiin painoihin. Jos haluaisimme käyttää näitä fonttipainoja erikseen vakiona fonttitiedostoina, ne ovat keskimäärin 234kB kukin - mikä johtaa yhteensä noin 1856Kb: n yhdistettyyn tiedostokokoon. Tietenkin tämä laskelma olettaa, että kaikki fonttipainot ovat erikseen standardina fontti, jota he eivät. (Vaikka jos etsit vain säännöllisiä fontteja, tutustu viestimme parhaat ilmaiset fontit saatavilla.)

Jos poistamme fontit, jotka eivät ole vakionafonttina, yhdistetty tiedostokoko on vielä lähes kolme kertaa muuttuvan fontin koko ja huomattavasti vähemmän tyylejä. Vaikka halusit vain rohkeita ja säännöllisiä versioita, jotka ovat yleisiä monissa verkkoprojekteissa, kaksi versiota standardilähteestä Sans Pro Font ovat edelleen suurempia kuin yksi muuttuja fontti. Tämä osoittaa, että vaihtelevilla fonteilla on mahdollisuus tehdä massiivisia säästöjä kaistanleveyttä vaarantamatta mallimme ja luovuuttamme.

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. — Vertailu fonttilähteen SANS Pro: n standardin ja muuttujan version välillä (Kuva luotto: Mandy Michael)

Muuttuvat fontit toimivat interpoloimalla master-muunnelmat pitkin akselia, rakentaa olennaisesti uusia pisteitä välissä. Tämä tarkoittaa, että voit asettaa fonttipainoja mielivaltaisiin pisteisiin pitkin akselia, joka esittelee paljon suurempia tyylejä ja muunnelmia. Lisäksi se johtuu siitä, että vaihtelevat fontit voidaan interpoloida, että voimme animoida jokaisen vaihtelun, mikä mahdollistaa sileät siirtymät sanomasta ohut paino lihavoituksi - mitä emme ole koskaan pystyneet saavuttamaan ennen.

Mikä tekee muuttuvista fonteista vielä jännittävämmäksi, on se, että suunnittelijat eivät rajoitu vain yhteen akseliin. Muuttuvat fontit voivat sisältää monia erilaisia akseleita, jotka edustavat eri tyylejä. Tämä voi sisältää kondensoitua, kursivoita, optista kokoa tai muita luovia tai mukautettuja vaihtoehtoja.

Haluatko sijoittaa fontit uudelle verkkosivustolle? Web-suunnittelu resursseille, päätämme parhaamme Verkkosivuston rakentaja Roundup ja valinta sivujen ylläpito palvelut. Tai varastoinnin päivitys, tarkista nämä pilvivarasto vaihtoehtoja.

01. Ymmärrä akselit muuttuviin fontteihin

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. — Tarkasteltaessa vaihtelevan fontin interpolointi painon ja leveyden akselin yli paljastaa räätälöinnin valikoiman, joka on saatavilla (Kuva luotto: Mandy Michael)

CSS: n muuttuvien fonttien käyttäminen on hyvin samankaltainen kuin tavallisesti käyttävät fontteja verkossa: käyttämällä @ Font-face at-sääntö . Meidän on kuitenkin ymmärrettävä eri tyyppiset akselit muuttuvan fontin sisällä, koska tämä määrittää, mitkä CSS-ominaisuudet käyttävät.

Muuttuva fontti on kahdenlaisia akseleita: rekisteröity akseli ja mukautettu akseli. Rekisteröity akseli viittaa akseliin, joka on riittävän yleinen, että se oli standardointia. Tällä hetkellä on viisi rekisteröityä akselia; Paino, leveys, viisto, kursiivi ja optinen koko ja ne kartoitetaan usein olemassa oleviin CSS-ominaisuuksiin, kuten fonttipainoon.

Typeface-suunnittelijat määrittelevät mukautetut akselit, voivat olla kaikenlaisia muunnelmia ja edellyttävät vain neljän kirjaimen tunnistetta fonttitiedostossa, jota voidaan viitata CSS: ssä.

02. Käytä rekisteröityä akselia

A range of variable font weights along an axis from light (200) to black (900). — Painonvaihtelut on määritelty akselilla, valolta (200) mustaksi (900) (Kuva luotto: Mandy Michael)

Kun kyseessä on rekisteröity akseli, haluamme varmistaa, että käytämme kaikkia siihen liittyviä CSS-ominaisuuksia, esimerkiksi fonttipainoa tai fonttityyliä.

Voimme perustaa fontit käyttämällä @ Font-face at-sääntö Kuten normaalisti; Muutos on siinä, miten määritämme kuvailevien, kuten fonttipainon, fonttien ja fonttityylin. Aikaisemmin olisimme asettaneet fontin painon 200 ja määritellyt tämän fontin valoversiona, ja sitten määrittäisimme toisen fonttikohtien lihavoitu versio ja tavallinen versio, kunnes meillä oli kaikki tarvittavat painot muotoilu. Muuttuvien fonttien avulla tarvitsemme vain yhden fonttipintalohkon. Joten sen sijaan, että käytät useita tapauksia, määritämme erilaisia arvoja, jotka vastaavat fontti-akselilla määritettyjä vähimmäis- ja maksimiarvoja.

 @ Font-Face {
Font-perhe: "lähde sans muuttuja";
SRC: URL ("lähde-sans-muuttuja.woff") muoto ("Woff-muunnelmat");
Fonttipaino: 200 700;
}

Tässä esimerkissä asetetaan fontin paino 200 - 700. Kun valikoima määritellään, voimme valita minkä tahansa numeron kyseisellä alueella fonttimaksuna, esimerkiksi 658. Tärkeää, jos asetat fonttisi painoalueeksi 200-700 ja Yritä sitten määrittää paino 900, vaikka fontilla on 900 painoarvoa, jota määritellään akselissaan, et voi käyttää sitä. Alue määrittelee, mitä sinulla on pääsy CSS: hen.

03. Aseta mukautetut akselit

Koska olemassa olevia CSS-ominaisuuksia ei ole olemassa, kun käytät mukautettua akselia, meidän on käytettävä uutta CSS-ominaisuutta nimeltä Font-muunnelman asetukset. Näin voimme määritellä niin monta nimetä ja mukautettuja akseleita kuin tarvitsemme.

 H1 {
Font-perhe: "Muu muuttuva fontti";
Fontti-muunnelmat: "WGHT" 375, "Inli" 88;
}

Esimerkissä WGHT viittaa painoon ja INLI: n rekisteröidään akseliin viittaavat räätälöityyn akseliin, jota kukin vastaa siihen liittyvää numeroarvoa, joka vastaa vaihtelun akselia pitkin. Vaikka voit viitata rekisteröidyn akselin fontti-muunnelman asetusten arvona, suosittelemme niiden sijaan kartoitettuja CSS-ominaisuuksia.

Vanhempien selainten tukemiseksi voimme käyttää salausfontteja tukemattomille selaimille käyttämällä CSS-ominaisuuden havaitsemista.

 H1 {
  Font-perhe: "lähde sans", sans-serif;
  fonttipaino: 700;
}

@supports (fontti-muunnelmat-asetukset: Normaali) {
h1 {
 Font-perhe: "Decoar";
 Fontti-muunnelman asetukset: "Inli" 88;
 }
}

Tarkastamalla fontti-muunnelman asetusten tukemisen, voimme sisällyttää muunnelman fonttityylit tukevien CSS-lohkon sisällä varmistaen, että niitä käytetään vain selaimissa, jotka voivat tukea muuttuvia fontteja - standardi-fontteja, joita käytetään tukemattomissa selaimissa.

04. Yhdistä JavaScript ja vaihtelevat fontit

A range of As rendered in a variety of font weights and sizes, showing the smooth transitions offered by variable fonts. — Muuttuvat fontit mahdollistavat sileät siirtymät, sanovat, ohut lihavoitu paino; Näin voit luoda sileitä muutoksia, jotka käyttävät JavaScript-muuttujia (Kuva luotto: Mandy Michael)

Voimme käyttää JavaScript-tapahtumia tilanteisiin, joissa haluamme hienosäätöä tai muuttaa fonttia tapahtumien perusteella, joita emme voi käyttää yksin CSS: llä. Yksinkertainen esimerkki vastaa fonttimaksumme katselukertomme koosta - kun näkymän pienempi, fonttipaino nousee raskaammaksi.

Nesteen asteikon luomiseksi meidän on kohdistettava kaksi arvoa ja yksiköitä - fontin paino ja näkymän koko. Voimme käyttää nykyisen näkymän leveyden käyttämällä window.innerwidthia ja luo uusi prosenttipohjainen asteikko muuntamalla se alueelle 0-0,99. Sisältämällä vähimmäis- ja maksimaaliset näkymät koot voimme hallita vaikutusvalikoimaa.

 var ViewportScale =
(window.innerwidth - minwindowsze) / (maxwindowsze - minwindowsze);

Sitten määritämme fontin painon perusteella näkyvään kokoamme.

 var fontweightscale = Viewportscale * (minfontweight - maxfontweight) + maxfontweight;

CSS Custom -ominaisuuksien käyttö, voimme käyttää JavaScript-arvoa päivittämään fontin painon CSS: ssä.

 P.Style.SetProperty ("- Paino", FontsScale);

Kun tämä yhdistetään funktioon ja liitetään ruudun tapahtumien kuuntelijalle, voimme päivittää fontin painon perustuen ikkunan uuteen kokoon.

Tällä perusmenetelmällä voimme muokata typografiaamme koko tapahtumien ja kokemusten perusteella. Jossa näkymä on laaja, voimme saada tarkemmin; Sitä vastoin, kun se on pienempi ja suljetulla tilalla, voimme tarkastella fontin leveyden pienentämistä tai painon lisäämistä, mikä parantaa sisällön ja typografian hallintaa luettavuuden, käytettävyyden ja suunnittelun kannalta.

Sinä pystyt Tarkastele koodia Tätä varten koodi.

Tämä artikkeli julkaistiin alun perin 318 netto , maailman myydyin aikakauslehti web-suunnittelijoille ja kehittäjille. Tilaa verkko tähän .

Löydä lisää muuttuvista fonteista Generate CSS: ssä

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

Hänen puheessaan CSS: ssä CSS: ssä keskittynyt CSS-konferenssi Web-suunnittelijoille, jotka tapahtuvat 26. syyskuuta 2019 Rich Mixissa, Lontoossa, Bianca Berning tutkii, kuinka vaihtelevat fontit voivat luoda uusia mahdollisuuksia kirjalliseen sanaan perinteisissä tiedotusvälineissä sekä uutta, impersive kokemuksia, kuten Ar, VR ja sekoitettu todellisuus.

Jos haluat saada tämän ja muut suuret neuvottelut, kannattaa houkutella lippuja nyt. Jos nappaat sinun ennen klo 17.00 15. elokuuta, voit säästää £ 50, maksaa vain £ 199 + ALV. Osta lippu nyt !

Aiheeseen liittyvät artikkelit:

3 tapaa Tech muuttaa tyypin
Aloita vaihtelevilla fontteilla CSS: ssä
Muuta tyyppisi verkossa muuttuvilla fonteilla

4 vaiheet muuttuvien fonttien käyttämiseen

01. Ymmärrä akselit muuttuviin fontteihin

02. Käytä rekisteröityä akselia

03. Aseta mukautetut akselit

04. Yhdistä JavaScript ja vaihtelevat fontit

Löydä lisää muuttuvista fonteista Generate CSS: ssä

Miten tehdään - Suosituimmat artikkelit

Miten Photoshop joku kuvaan

Luo oma kalligrafinen harja illustratorissa

Lisää UI-animaatioita sivustoosi

Kuinka rakentaa monimutkaisia asetteluja käyttämällä CSS

Maalaa klassinen keiju, jossa on procreate

Miten maalata fantasiaeläimiä

Luo itse muotokuva vain 4 väriä

Miten nimetä Web Design Agency

Luokat