4 kroki do stosowania zmiennych czcionek

Sep 12, 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.

(Kredyt obrazu: przyszłość)

Zmienne czcionki umożliwiają projektantom czcionki do definiowania różnic typu w samej czcionce, umożliwiając jeden plik czcionki, aby działać jak wiele czcionek. Standardowe czcionki są pogrupowane w rodziny czcionek zawierające wiele oddzielnych plików czcionek, z których każda reprezentuje inny styl, na przykład ciężar lub śmiała waga. Zmienne czcionki zawierają wszystkie te same informacje w jednym pliku czcionki.

Korzystanie z źródła SANS Pro jako przykład, zmienna wersja czcionki wynosi około 394 kB i jest w wielu różnych ciężarach. Gdybyśmy mieli korzystać z tych ciężarów czcionek indywidualnie jako standardowe pliki czcionek, są one średnio 234 KB, co powoduje łącznie rozmiar pliku około 1856kb. Oczywiście, to obliczenie zakłada, że wszystkie ciężary czcionki istnieją indywidualnie jako standardowa czcionka, której nie. (Choć jeśli szukasz tylko zwykłych czcionek, sprawdź nasz post na Najlepsze darmowe czcionki dostępny.)

Jeśli usuniemy czcionki, które nie istnieją jako standardowa czcionka, połączona wielkość pliku jest nadal prawie trzykrotnie rozmiar zmiennej czcionki i znacznie mniej stylów. Nawet jeśli po prostu chciałeś pogrubione i regularne wersje, powszechne w wielu projektach internetowych, dwie wersje standardowego źródła SANS Pro czcionki są nadal większe niż pojedyncza zmienna czcionka. To, co pokazuje, że z zmiennymi czcionkami mamy potencjał do tworzenia ogromnych oszczędności na przepustowość bez naruszenia naszych projektów i kreatywności.

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. — Porównanie rozmiarów plików w zakresie ciężarów czcionek między standardową i zmienną wersją źródła czcionki SANS Pro (Kredyt obrazu: Mandy Michael)

Zmienne czcionki działają, interpolując odmiany główne wzdłuż osi, zasadniczo konstruując nowe punkty pomiędzy. Oznacza to, że można ustawić ciężary czcionki w dowolnych punktach wzdłuż osi prezentującej znacznie większą liczbę stylów i odmian. Ponadto, dlatego, że zmienne czcionki mogą być interpolowane, że jesteśmy w stanie animować między każdą różnicą, umożliwiając płynne przejścia od powiedzenia cienkiej wagi do odważnej wagi - coś, czego nigdy wcześniej nie udało nam się wykonać.

Co robi zmienne czcionki jeszcze bardziej ekscytujące, jest to, że projektanci nie są ograniczeni do jednej osi. Zmienne czcionki mogą zawierać wiele różnych osi reprezentujących zakres różnych stylów. Może to obejmować skondensowany, kursywny, optyczny rozmiar lub inne opcje kreatywne lub niestandardowe.

Chcesz umieścić czcionki na nowej stronie? W przypadku zasobów projektowania stron internetowych, udaj się do naszego najlepszego Kreator strony internetowej Roundup and Pick of Top hosting Usługi. Lub na aktualizację pamięci, sprawdź te magazyn w chmurze Opcje.

01. Zrozum osie w zmiennych czcionkach

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. — Patrząc na interpolację zmiennej czcionki przez osi wagi i szerokości ujawnia zakres dostosowywania, który jest dostępny (Kredyt obrazu: Mandy Michael)

Korzystanie z zmiennych czcionek w naszych CSS jest bardzo podobny do tego, jak zwykle używamy czcionek w sieci: Korzystanie z @ font-face w regule . Najpierw musimy jednak zrozumieć różne typy osi wewnątrz zmiennej czcionki, ponieważ określa, które właściwości CSS wykorzystujemy.

Istnieją dwa typy osi w zmiennej czcionce: zarejestrowanej osi i osi niestandardowej. Zarejestrowana oś odnosi się do osi, która jest wystarczająco powszechna, że warto standaryzować. Obecnie istnieje pięć zarejestrowanych osi; Waga, szerokość, ślad, rozmiar kursywy i optyczny, a one często są odwzorowane do istniejących właściwości CSS, takich jak ciężar czcionki.

Osieki niestandardowe są zdefiniowane przez projektantów typefeface, mogą być dowolną różnicą i wymagają tylko czteroliterowego identyfikatora w pliku czcionki, które można określić w CSS.

02. Użyj zarejestrowanej osi

A range of variable font weights along an axis from light (200) to black (900). — Odmiany masy są zdefiniowane na osi, od światła (200) do czerni (900) (Kredyt obrazu: Mandy Michael)

Jeśli chodzi o zarejestrowaną oś, chcemy upewnić się, że używamy powiązanych właściwości CSS, na przykład, masy czcionki lub stylu czcionek.

Możemy skonfigurować nasze czcionki za pomocą @ font-face w regule jak normalnie byśmy byli; Zmiana polega na tym, jak definiujemy odmiany deskryptorów, takich jak czcionka, odcinek czcionek i styl czcionki. Wcześniej ustawilibyśmy czcionkę 200 i zdefiniowaliśmy to jako wersję światła czcionki, skonfigurowaliśmy kolejny blok czcionki dla wersji śmiałej i regularnej wersji, dopóki nie mieliśmy wszystkich wymaganych ciężarów Projektowanie. Z zmiennymi czcionkami potrzebujemy tylko jednego bloku czcionki. Więc zamiast używać wielu instancji, określamy szereg wartości odpowiadających wartościom minimalnym i maksymalnym, które są zdefiniowane na osi czcionki.

 @ font-face {
Czcionka-rodzina: "Zmienna źródła Sans";
SRC: format adresu URL ("sans-variagle.woff" ("wariacje WOFF");
Czcionka: 200 700;
}

W tym przykładzie ustawiamy masę czcionki 200 do 700. Po zdefiniowaniu naszej oferty możemy wybrać dowolny numer w tym zakresie, ponieważ nasza masa czcionek, na przykład 658. Co ważne, jeśli ustawisz wahanie czcionki w zakresie 200 do 700 i Następnie spróbuj zdefiniować wagę 900, nawet jeśli czcionka ma 900 wagi zdefiniowanej w swojej osi, nie będziesz w stanie go użyć. Zakres określa, do czego masz dostęp do CSS.

03. Skonfiguruj niestandardowe osie

Ponieważ nie będzie istnieć wcześniej istniejące właściwości CSS podczas korzystania z osi niestandardowej, musimy skorzystać z nowej właściwości CSS o nazwie Ustawienia Variation Font. Umożliwi to nam zdefiniowanie jak wielu nazwanych i niestandardowych osi, ile potrzebujemy.

 H1 {
Czcionka: "Moja zmienna czcionka";
Ustawienia odmiany czcionek: "Wht" 375, "Inli" 88;
}

W przykładzie tutaj, Wht odnosi się do zarejestrowanej osi wagi, a Inli odnosi się do zewnętrznej osi zwanej inline, każdy z powiązaną wartością liczbą odpowiadającą punktowi wzdłuż osi zmienności. Podczas gdy można odwoływać się do zarejestrowanej osi jako wartości dla ustawień zmienności czcionek, zaleca się zamiast tego korzystać z mapowanych właściwości CSS.

Aby zapewnić wsparcie w starszych przeglądarkach, możemy użyć czcionek awarii dla nieobsługiwanych przeglądarek, wykorzystując wykrywanie funkcji CSS.

 H1 {
  Czcionka-rodzina: "Źródło SANS", SANS-SERIF;
  Czcionka: 700;
}

@Supports (Ustawienia odmiany czcionki: Normal) {
h1 {
 Czcionka-rodzina: "Decovar";
 Ustawienia odmiany czcionek: "Inli" 88;
 }
}

Sprawdzając obsługę ustawień zmiennych, możemy dołączyć nasze zmienne style czcionki wewnątrz bloków CSS, dzięki czemu będą używane tylko w przeglądarkach, które mogą obsługiwać zmienne czcionki - z naszymi standardowymi czcionkami używanymi w nieobsługiwanych przeglądarkach.

04. Połącz czcionki JavaScript i zmienne

A range of As rendered in a variety of font weights and sizes, showing the smooth transitions offered by variable fonts. — Zmienne czcionki umożliwiają płynne przejścia, powiedzmy, cienko do śmiałej wagi; Umożliwia to tworzenie płynnych transformacji wykorzystujących zmienne javascript (Kredyt obrazu: Mandy Michael)

Możemy skorzystać z wydarzeń JavaScript dla sytuacji, w których chcemy bardziej dostrojoną kontrolę lub zmienić czcionkę na podstawie zdarzeń, których nie możemy uzyskać dostęp do CSS sam. Prosty przykład byłby pasujący do naszej masy czcionki do wielkości naszej rzutni - gdy rzutysta staje się mniejsza, ciężar czcionki staje się cięższy.

Aby utworzyć skalę płynów, musimy wyrównać dwa zestawy wartości i jednostek - masę czcionki i rozmiar rzutni. Możemy uzyskać dostęp do bieżącej szerokości rzutni przy użyciu okna.innerwidth i utwórz nową skalę opartą na procentowo, konwertując ją do zakresu 0-0,99. Włączenie minimalnych i maksymalnych rozmiarów rzutni, możemy kontrolować zakres efektu.

 var vieweportscale =
(window.innerwidth - minwindowsize) / (maxwinsize - minwindowsize);

Następnie określamy masę czcionki na podstawie naszej wielkości rzutni.

 VAR Fontweightscale = ViewsportScale * (MinfonTweight - MaxFontweight) + maxFontweight;

Korzystanie z właściwości niestandardowych CSS możemy użyć naszej wartości JavaScript, aby zaktualizować masę czcionki w naszych CSS.

 P.Style.setProperty ("- Waga", Fontweightscale);

Gdy jest to łączone w funkcję i dołączoną do słuchacza zdarzenia Zmień rozmiar, możemy zaktualizować masę czcionki na podstawie nowego rozmiaru okna.

Dzięki tym podstawowym podejściu możemy zmodyfikować nasze typografię na podstawie wszelkiego rodzaju wydarzeń i doświadczeń. Gdzie rzutnia jest szeroka, możemy mieć więcej szczegółów; I odwrotnie, gdy jest mniejszy iw bardziej ograniczonej przestrzeni, możemy spojrzeć na zmniejszenie szerokości czcionki lub zwiększenie wagi, zapewniając lepszą kontrolę nad naszą treścią i typografią pod względem czytelności, użyteczności i projektowania.

Możesz Wyświetl kod dla tego na kodeksie.

Ten artykuł został pierwotnie opublikowany w wydaniu 318 netto , Najlepiej sprzedający się magazyn na świecie dla projektantów stron internetowych i programistów. Subskrybuj netto tutaj .

Odkryj więcej o zmiennych czcionkach w Generuate CSS

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

W rozmowach w Generuj CSS konferencja CSS dla projektantów stron internetowych odbywa się 26 września 2019 r. W Rich MIX, Londyn, Banning Bianca będzie zbadać, w jaki sposób czcionki zmienne mogą tworzyć nowe możliwości pisemnego słowa w tradycyjnych mediach, a także nowe, wciągające Doświadczenia, takie jak AR, VR i mieszana rzeczywistość.

Jeśli chcesz złapać to i inne wielkie rozmowy, warto teraz przyciągnąć swoje bilety. Jeśli chwytasz swoje wcześniej do 5 past UTC 15 sierpnia, możesz zaoszczędzić 50 GBP, płacąc tylko 199 £ + VAT. Kup teraz bilet !

Powiązane artykuły:

3 sposoby zmiany techniczne
Zacznij od zmiennych czcionek w CSS
Przekształć swój typ online za pomocą zmiennych czcionek

4 kroki do stosowania zmiennych czcionek

01. Zrozum osie w zmiennych czcionkach

02. Użyj zarejestrowanej osi

03. Skonfiguruj niestandardowe osie

04. Połącz czcionki JavaScript i zmienne

Odkryj więcej o zmiennych czcionkach w Generuate CSS

Jak - Najpopularniejsze artykuły

44 najlepszych skrótów i gestów iPadów 2020

Jak narysować słonia

Utwórz specjalne wykończenia druku w InDesign

Włącz menu za pomocą animacji z CSS

Zacznij od HTML Canvas

Utwórz efekt portalu w Majowie

Jak korzystać z narzędzi cyfrowych, aby utworzyć ręcznie rysowane wygląd

Geometria kompleksu modelowania: 5 najlepszych wskazówek

Kategorie