4 kroky k použití variabilních písem

Sep 17, 2025

jak

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.

(Image Credit: budoucnost)

Variabilní písma umožňují návrhářům písma definovat změny typu v rámci samotného písma, což umožňuje jednomu souboru písma, aby fungoval jako více písem. Standardní písma jsou seskupena do rodin fontů, které obsahují více samostatných souborů písma, z nichž každá představuje jiný styl, například světelnou hmotnost nebo odvážnou hmotnost. Variabilní fonty obsahují všechny tyto informace v jediném souboru písem.

Použití zdroje Sans Pro jako příklad, variabilní verze písma součty přibližně 394KB a přichází v široké škále závaží. Kdybychom měli používat tyto závaží písma individuálně jako standardní soubory písem, jsou v průměru 234KB každý - což má za následek kombinované velikosti souboru přibližně 1856kB. Tento výpočet samozřejmě předpokládá, že všechny hmotnosti fontů existují individuálně jako standardní písmo, které ne. (I když hledáte jen pravidelné fonty, podívejte se na náš příspěvek na Nejlepší volná písma k dispozici.)

Pokud odstraníme fonty, které neexistují jako standardní písmo, kombinovaná velikost souboru je stále téměř třikrát větší než velikost proměnné písmo a s výrazně méně stylů. I když jste chtěli jen odvážné a pravidelné verze, běžné v mnoha webových projektech, dvě verze standardního zdroje Sans Pro písmo jsou stále větší než jediné variabilní písmo. To, co dokazuje, že s variabilními fonty máme potenciál učinit masivní úspory na šířku pásma bez ohrožení našich návrhů a tvořivosti.

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. — Porovnání velikostí souborů řady hmotnostních fontů mezi standardní a variabilní verzí písma Zdroj Sans Pro (Image Credit: Mandy Michael)

Variabilní fonty pracují interpolováním hlavních variant podél osy, v podstatě konstruovat nové body mezi nimi. To znamená, že byste mohli nastavit hmotnosti písma na libovolných bodech podél osy, která představuje mnohem větší počet stylů a variant. Dále je to proto, že variabilní písma mohou být interpolována, že jsme schopni animovat mezi jednotlivými variací, což umožňuje hladké přechody z říkat tenkou váhu k odvážné hmotnosti - něco, co jsme nikdy nedokázali dosáhnout.

Co dělá variabilní fonty ještě vzrušující, že designéři nejsou omezeni na jedinou osu. Variabilní fonty mohou obsahovat mnoho různých os představujících řadu různých stylů. To by mohlo zahrnovat kondenzovanou, kurzívou, optickou velikost nebo jiné kreativní nebo vlastní možnosti.

Chcete umístit své fonty na nové webové stránky? Pro zdroje webového designu, hlavu na naše nejlepší Webové stránky Builder. roundup a výběr vrcholu web hosting Služby. Nebo pro upgrade úložiště, podívejte se na tyto cloudové úložiště Možnosti.

01. Rozumět osám v variabilních fontech

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. — Při pohledu na interpolaci proměnlivého písma přes hmotnost a šířka osa odhaluje rozsah přizpůsobení, který je k dispozici (Image Credit: Mandy Michael)

Použití variabilních fontů v našich CSS je velmi podobná tomu, jak bychom normálně používali fonty na webu: pomocí @ font-face v pravidle . Nejprve však musíme pochopit různé typy os uvnitř proměnné písmo, protože to určuje, které CSS vlastnosti využíváme.

Existují dva typy os v proměnné písmo: registrovaná osa a vlastní osu. Registrovaná osa se týká osy, která je dost běžná, že stála standardizace. V současné době je pět registrovaných os; Hmotnost, šířka, šikmá, kurzíva a optická velikost a tyto jsou často mapovány na stávající vlastnosti CSS, jako je hmotnost fontů.

Vlastní osy jsou definovány návrháři typu písma, mohou být jakýkoliv druh varianty a vyžadují pouze čtyřmístný identifikátor v souboru písma, který lze odkazovat v CSS.

02. Použijte registrovanou osu

A range of variable font weights along an axis from light (200) to black (900). — Variace hmotnosti jsou definovány na ose, od světla (200) na černou (900) (Image Credit: Mandy Michael)

Pokud jde o registrovanou osu, chceme se ujistit, že používáme všechny přidružené vlastnosti CSS, například, font-hmotnost nebo stylu písma.

Můžeme nastavit naše fonty pomocí @ font-face v pravidle jak bychom normálně; Změna je v tom, jak definujeme varianty popisovačů, jako je font-hmotnost, font-úsek a stylu písma. Dříve bychom jsme nastavili font-hmotnost 200 a definovali jsme to jako světelná verze písma, pak bychom nastavili další blok tváře písma pro odvážnou verzi a pravidelnou verzi, dokud jsme neměli všechny závaží, které byly požadovány konstrukce. S variabilními fonty potřebujeme pouze jeden blok tváře písma. Takže místo použití více instancí určujeme řadu hodnot, které odpovídají minimálním a maximálním hodnotám, které jsou definovány na ose písma.

 @ font-face {
Font-Family: "Zdrojová sansová proměnná";
SRC: URL ("Zdroj-sans-variable.woff") ("woff-variace");
Hmotnost písma: 200 700;
}

V tomto příkladu stanovujeme hmotnost písma 200 až 700. Jakmile je definován náš řada, můžeme si vybrat libovolné číslo v tomto rozsahu jako naší hmotnosti písma, například 658. Důležité, pokud nastavíte rozsah hmotnosti písma jako 200 až 700 a Pak zkuste definovat hmotnost 900, i když písmo má 900 hmotnost definované v jeho ose, nebudete moci použít. Rozsah definuje, co máte přístup do CSS.

03. Nastavte vlastní osy

Vzhledem k tomu, že žádné existující vlastnosti CSS budou existovat při použití vlastní osy, musíme použít novou vlastnost CSS nazvanou Nastavení písma. To nám umožní definovat tolik pojmenovaných a vlastních os, jak potřebujeme.

 H1 {
Font-Family: "Moje variabilní písmo";
Nastavení variačního formátu: 'wght' 375, 'inli' 88;
}

V příkladu zde se GGht odkazuje na registrovanou osu hmotnosti a inli odkazuje na vlastní osu zvanou inline, z nichž každá se přidružená číselná hodnota odpovídá bodu podél osy variace. I když můžete zaregistrovat registrovanou osu jako hodnotu pro nastavení písma-variace, doporučuje se místo toho použít své mapované vlastnosti CSS.

Chcete-li zajistit podporu ve starších prohlížečích, můžeme použít flback fonty pro nepodporované prohlížeče využitím detekce CSS funkce.

 H1 {
  Font-Family: "Zdroj Sans", Sans-Serif;
  Hmotnost písma: 700;
}

@Supports (nastavení písma-variace: normální) {
H1 {
 Font-Family: "Decovar";
 Nastavení písma-variace: "INLI" 88;
 }
}

Kontrolou podpory nastavení variace písma, můžeme obsahovat naše variabilní styly písma uvnitř bloků CSS CSS, což zajišťuje, že budou používány pouze v prohlížečích, které mohou podporovat variabilní fonty - s našimi standardními fonty používanými v nepodporovaných prohlížečích.

04. Kombinujte javascript a variabilní fonty

A range of As rendered in a variety of font weights and sizes, showing the smooth transitions offered by variable fonts. — Variabilní fonty umožňují hladké přechody od, řekněme, tenký k odvážné hmotnosti; To umožňuje vytvářet hladké transformace využívající proměnné JavaScript (Image Credit: Mandy Michael)

Můžeme využít Javascript událostí pro situace, kdy chceme více vyladěnou kontrolu nebo změnit písmo na základě událostí, které nemůžeme přístup s CSS sám. Jednoduchý příklad by odpovídal naší hmotnosti písma na velikost našeho výřezu - protože výřez z menší, hmotnost písma je těžší.

Aby bylo možné vytvořit měřítko tekutiny, musíme zarovnat dvě sady hodnot a jednotek - hmotnost písma a velikost výřezu. Můžeme přistupovat k aktuální šířce výřezu pomocí window.innerwidth a vytvořit novou procentuální stupnici převedením do rozsahu 0-0.99. Zahrnutím minimálních a maximálních velikostí výřezu můžeme řídit rozsah účinku.

 Var ViewPortScale =
(window.innerwidth - minwindowsize) / (maxwindowsize - minwindowsize);

Pak určujeme hmotnost písma založená na naší velikosti výřezu.

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

Pomocí vlastních vlastností CSS můžeme použít naši hodnotu JavaScriptu pro aktualizaci hmotnosti písma v našich CSS.

 p.style.SetProperty ("- hmotnost", fontweightscale);

Je-li to kombinováno do funkce a připojeno k posluchači Resize Událost, můžeme aktualizovat hmotnost písma na základě nové velikosti okna.

S tímto základním přístupem jsme schopni upravit naši typografii na základě všech způsobů událostí a zkušeností. Kde je výřez široký, můžeme mít více podrobností; Naopak, když je menší a ve více omezených prostor, mohli bychom se podívat na snížení šířky písma nebo zvýšení hmotnosti, poskytováním lepší kontroly našeho obsahu a typografie, pokud jde o čitelnost, použitelnost a design.

Můžeš Zobrazení kódu Pro to na Codepen.

Tento článek byl původně zveřejněn v čísle 318 z síť Časopis nejprodávanějšího světa pro webové designéry a vývojáře. Přihlásit se k odběru netto .

Objevte více o variabilních fontech při generování CSS

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

Ve svém rozhovoru na generování CSS, zaměřená CSS konference CSS pro web designéry, která se koná 26. září 2019 v bohatém mixu, Londýn, Bianca Berning prozkoumá, jak variabilní fonty mohou vytvářet nové příležitosti pro psané slovo v rámci tradičních médií, stejně jako nová, pohlcená Zkušenosti, jako je AR, VR a smíšená realita.

Pokud chcete chytit toto a další skvělé rozhovory, stojí za to vyhodit své vstupenky. Pokud chytíte své před 5PM UTC dne 15. srpna, můžete ušetřit £ 50, platit jen £ 199 + DPH. Nakupujte si jízdenku Dokázal se!

Související články:

3 způsoby, jak se TECH mění typ
Začněte s variabilními fonty v CSS
Transformovat svůj typ online s variabilními fonty

4 kroky k použití variabilních písem

01. Rozumět osám v variabilních fontech

02. Použijte registrovanou osu

03. Nastavte vlastní osy

04. Kombinujte javascript a variabilní fonty

Objevte více o variabilních fontech při generování CSS

jak - Nejoblíbenější články

Jak vytvořit vrstvený efekt paralaxy na vašich stránkách

Jak vybrat pomocí nástrojů Lasso Photoshop

Master procesní modelování

Vytvořit ohromující krajiny v Houdini

Jak vyřezávat postavu ve VR

12 Tipy pro realistické 3D osvětlení

Simulovat transformaci Ghost Rider

Průvodce PRO Vytvoření 3D textur

Kategorie