Ta strona została przetłumaczona przez Cloud Translation API.

Migracja do czcionek zmiennych

1. Wprowadzenie

Ostatnia aktualizacja: 11.05.2022

Korzystaj z dynamicznej zmienności w interfejsie użytkownika dzięki czcionkom zmiennym, które pozwolą Ci zwiększyć responsywność układów, motywów i ułatwień dostępu, a zarazem przyspieszyć działanie aplikacji.

Czego się nauczysz

Co to są czcionki zmienne
Jak możesz je dostosować.
Jak stosować czcionki zmienne w projektach.
Jak stosować czcionki zmienne za pomocą interfejsu Google Fonts API i w CSS.

Wymagania wstępne

W tym module omówimy podstawowe koncepcje projektowania.

znajomość skal typów;
znajomość programu Figma;
podstawowa znajomość HTML i CSS;

Czego potrzebujesz

Konto Figma
Plik z DesignLab firmy Figma
Edytorem kodu do tworzenia stron internetowych

2. Rozpocznij

Konfiguracja

Aby rozpocząć, musisz uzyskać dostęp do pliku Designlab w Fimmie. Wszystko, czego potrzebujesz do wykonania ćwiczenia, znajdziesz w pliku Figma. Możesz pobrać i zaimportować plik lub zduplikować go z społeczności Figma.

Najpierw zaloguj się w Figmie lub utwórz konto.

Duplikat z Społeczności Figma

Otwórz plik Przejście na czcionki zmienne lub wyszukaj czcionki zmienne w społeczności Figmy. Aby skopiować plik do swoich plików, w prawym górnym rogu kliknij Duplikuj.

Układ pliku

Podczas przeglądania pliku zwróć uwagę, że jest on samodzielny i zaczyna się od wprowadzenia. Każda sekcja jest podzielona na szereg połączonych ze sobą artboardów, a po omówieniu podstawowych pojęć dotyczących danej sekcji następują ćwiczenia. Sekcje i ćwiczenia są ze sobą powiązane i należy je wykonywać kolejno.

W tym laboratorium programistycznym znajdziesz bardziej szczegółowe omówienie tych zagadnień i ćwiczeń. Przeczytaj kodlab, aby dowiedzieć się więcej o nowych funkcjach Material You.

Zaczynając od artboardu Wprowadzenie, znajdziesz przyciski, które łączą artboardy w kolejności. Aby uzyskać dostęp do linku, kliknij przycisk.

Sprawdzanie czcionek zmiennych

Zanim zaczniesz, upewnij się, że masz czcionkę zmienną. Ten plik używa czcionki Roboto Flex, która jest już dostępna w Figmie. Możesz też pobrać ją ze strony fonts.google.com.

3. Czym są czcionki zmienne?

Czcionki zmienne to nowy, innowacyjny format czcionek, który pozwala użytkownikom na kontrolowanie typu i ikon. Roboto Serif i Roboto Flex to nowe kroje czcionek stworzone z myślą o technologii czcionek zmiennych. Każdy z nich ma szeroki zakres osi.

Wyrażenie estetyczne i osi

Projektanci nie są już ograniczeni do starszych sztywnych stylów, takich jak zwykły, pogrubiony, kursywa itp. Zmiennymi w czcionkach zmiennych steruje się za pomocą osi lub instancji. Jeśli projektant czcionek zechce, dowolną zmienną w projektie czcionki można przypisać do osi kontrolowanej przez użytkownika. Typowe osie to kursywa, rozmiar optyczny, nachylenie, grubość i szerokość. Te 5 osi to zarejestrowane osie w CSS.

Zalety

Czcionki zmienne umożliwiają wyświetlanie wielu stylów w jednym pliku czcionki, co sprawia, że strony internetowe są bardziej ekologiczne, mniejsze i szybsze, a projektant ma większą kontrolę nad wyrazem.

4. Używanie czcionek zmiennych w projektach

Zmiana osi

Przyjrzyjmy się wszystkim dostępnym parametrom (czyli osiom) i ich działaniu. Wybierz typ po prawej stronie i otwórz okno Szczegóły typu (ikona więcej), aby otworzyć suwaki osi i przejrzeć poszczególne parametry.

Grubość określa grubość litery. Zapewnia pełny, ciągły zakres grubości linii.

Szerokość to ilość miejsca poziomego zajmowanego przez znaki czcionki.

Zmień styl z poziomego na pochyły, który jest też znany typografistom jako „ukośny”. Chociaż rzadko, Slant może działać w drugim kierunku, co nazywamy stylem „odwrotnego pochylenia”.

Stopień to dodatkowy modyfikator optycznej wagi kroju pisma, niezależny od osi Waga. Zarówno waga, jak i klasa wpływają na grubość listu, ale zmiany w klasie są znacznie bardziej szczegółowe.

Rozmiar optyczny. Dostosowywanie stylu do określonych rozmiarów tekstu określonych w punktach. W mniejszych rozmiarach litery są zwykle optymalizowane pod kątem czytelności, z luźniejszym odstępem między znakami i grubszymi ścieżkami z mniejszą liczbą szczegółów. W większych rozmiarach litery są zwykle optymalizowane pod kątem nagłówków z cieńszymi obrysami i bardziej szczegółowymi formami oraz bardziej ekstremalnych grubości i szerokości.

Aby pobawić się osią czcionek zmiennych poza Figmą, obejrzyj prezentację czcionek zmiennych.

5. Informowanie coraz większej liczby klientów

Jeśli korzystasz z poradnika stylu marki, możesz mieć ustaloną skalę czcionek, która określa ograniczenia typograficzne. Używanie czcionek zmiennych nie oznacza, że należy zrezygnować z konsekwencji. Daje to jeszcze większą elastyczność w przypadku skali typu (np. zwiększania wagi stopnia na ciemnym tle) w jednym pliku.

Skala czcionek może składać się z więcej niż 1 rodziny czcionek, ale tutaj użyjemy tylko jednej, aby dostosować skróconą wersję domyślnej skali czcionek w Material.

Zacznijmy od dostosowywania skali czcionek w tekstach. Dzięki temu możemy najpierw ustawić rozmiar podstawowego typu witryny, a potem dostosować go optycznie. Domyślnie Body Large to 18 pikseli, wybrana i skonfigurowana czcionka to Roboto Flex. Dostosowanie tekstu do lepszej czytelności oznaczało do tej pory zmianę rozmiaru i grubości czcionki, co wymagało utworzenia nowego pliku czcionki. Teraz możemy jednak dostosować niektóre z osi. Dostosowywanie rozmiaru, jakości i wagi optycznej.
Kontynuuj, wybierając Etykieta. Etykiety są bardziej użytkowe i służą w krótszych, mniejszych kontekstach, np. w przyciskach. Dostosować stopień jakości, aby etykieta była prawidłowo wyświetlana na pojemnikach przycisków i elementach.
Dalsze udoskonalanie za pomocą pól Tytuł, Nagłówek i Wyświetlanie. Wszystkie te trzy formaty są używane do krótszych tekstów o średnim lub wysokim stopniu podkreślenia, takich jak tytuły i sekcje stron. Nagłówek i element wyświetlania mogą być bardziej wyraziste dzięki ich rozmiarowi i wyróżnieniu. Możesz tu pobawić się wszystkimi osiami.
Po wybraniu typu kliknij 4 kropki i dodaj (+), aby ustawić styl tekstu, który zapewni spójne ustawienia typu, które można ponownie wykorzystać.

Domyślną skalę typu Material możesz wygenerować jako style Figmy za pomocą kreatora motywów Material lub przez zduplikowanie zestawu projektowego M3.

6. Zastosowanie do interfejsu

Po skonfigurowaniu skali typu zastosujemy ją do elementów interfejsu użytkownika, aby zaimplementować ją w kodzie. Zastanów się, jak za pomocą czcionek zmiennych możesz zwiększyć wyrazistość i czytelność. Jeśli w poprzednim ćwiczeniu skonfigurujesz style Figmy, możesz je zastosować, a potem zaktualizować ich osie.

Spójrz na elementy interfejsu po lewej stronie. Pierwsza karta zawiera typ rośliny, opis i niektóre tagi kategorii, a pozostałe karty zawierają instrukcje pielęgnacji roślin. Typ rośliny ma sens jako element o wysokim stopniu natężenia, dlatego użyj stylu nagłówka. Ustaw go tak, jak wcześniej skonfigurowaliśmy jako nagłówek. Karty z informacjami o opiece mają również tytuł, ale nie są tak wyróżnione, dlatego ustaw je jako „title”.
Treść dotycząca szczegółów rośliny i instrukcji można przypisać do „body large”, a etykiety kategorii do „label large”.
Eksperymentuj z różnymi rolami i dostosuj elementy interfejsu oraz typy, aby znaleźć odpowiednią równowagę.

7. Implementacja w kodzie

Wprowadzanie czcionek zmiennych w kodzie za pomocą CSS to metoda podobna do stosowania czcionek internetowych z użyciem usługi dostarczania czcionek do wczytywania czcionek i ich dostosowywania za pomocą właściwości CSS.

Do implementacji użyjemy podstawowego kodu HTML i CSS, a nie MWC ani żadnej innej platformy.

Czcionki zmienne w Google Fonts

Używaj Google Fonts jako usługi dostarczania czcionek, aby łatwo implementować w swojej witrynie mnóstwo czcionek, w tym czcionki zmienne.

Aby sprawdzić, które czcionki zmienne są dostępne, otwórz stronę fonts.google.com. W sekcji wyszukiwania zaznacz pole wyboru Wyświetl tylko czcionki zmienne, aby filtrować czcionki. Czcionki zmienne zawierają w dolnej części strony obszar, w którym możesz ustawić suwaki dla każdej osi dostępnej w rodzidle.

Stylizacja za pomocą kodu CSS

Nie wszystkie czcionki mają taką samą liczbę osi do dostosowania. Obecnie najpopularniejsze są opcje „Szerokość”, „Szerokość”, „Szerokość”, „Pionowe” i „Rozmiar optyczny”.

Można je ustawić za pomocą podstawowych właściwości czcionek CSS, które istniały przed czcionkami zmiennymi. Mimo że nie wszystkie funkcje są jeszcze obsługiwane (stan na maj 2022 r.), wszystkie osie można pewnie ustawić za pomocą nowej właściwości font-variation-settings.

`Axes`	`Abbreviation`	`CSS property`
`Weight`	`wght`	`font-weight`
`Width`	`wdth`	`font-stretch`
`Slant`	`slnt`	`font-style*`
`Italic`	`ital`	`font-style*`
`Optical Size`	`opsz`	`font-optical-sizing`

*Slant (slnt) i Italic (ital) w stylu czcionki nie są wiarygodne.

8. Importowanie za pomocą interfejsu Google Fonts API

Używaliśmy tylko czcionki Roboto, ale sprawdź wszystkie czcionki dostępne na fonts.google.com.

W dalszej części tego ćwiczenia będziemy używać czcionki Roboto, a na kolejnych kartach dostosujemy czcionkę na podstawie poprzedniego ćwiczenia.

Skopiuj ten kod zawierający interfejs użytkownika karty do wybranego internetowego środowiska IDE.

<html>
 <title>Migrating to Variable fonts</title>
 <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<style>
/* imports __________________ */


/* body __________________________ */
body {
 font-size: 18px;
 color: #21005D;
 background: #E8DEF8;
}
/* typography __________________________ */

h1 {   
   line-height: 0;
/* add font styles for headline */
}

h2 {
   line-height: 0;
/* add font styles for care titles */
}

p {
   margin: 0;
   line-height: 150%;
/* add font styles for body copy */
}

.label {
/* add font styles for labels */
}

/* layout __________________________ */
article {
   margin: 16px auto;
   padding: 16px 24px;
   width: 30%;
   background: #FFFFFF;
   border: 1px solid #4F8438;
   border-radius: 24px;
}
div.labels {
   display: flex;
   flex-direction: row;
   align-items: center;
   gap: 12px;
}
span.label {
   margin: 8px 0;
   padding: 4px 8px;
   background: #C4EED0;
   border-radius: 8px;
}
article.care {
   padding: 8px 24px;
   display: flex;
   flex-direction: row;
   align-items: center;
   gap: 8px;
}
</style>
  <body>
   <article>
     <h1>philodendron</h1>
     <p>The philodendron is part of a large family of plants comprising 489 spcies. Known for their large interesting leaves, growing mainly in tropical climates. Most philodendron make for ideal houseplants, with some more rare exceptions are easy to propogate and require less attention as some fussier plant families</p>
     <div class="labels">
       <span class="label">easy care</span>
       <span class="label">tropical</span>
     </div>
   </article>

   <article class="care">
       <span class="material-icons">water</span>
       <h2>water</h2>
       <p>Water when dry</p>
   </article>

   <article class="care">
       <span class="material-icons">light</span>
       <h2>light</h2>
       <p>Bright indirect light</p>
   </article>
 </body>
 </html>

Zanotuj specyfikacje stylów ustawione w poprzednim ćwiczeniu dla nagłówka, tytułu, tekstu i etykiety. Z tym na uwadze otwórz stronę Roboto Flex. Ustaw suwaki zgodnie ze specyfikacjami ustawionymi w Figmie, a następnie kliknij Wybierz ten styl, aby dodać każdy styl do menu bocznego.
W panelu pod wybranymi stylami znajdź opcję Użyj w internecie. Możesz dodać czcionkę do kodu na 2 sposoby: za pomocą atrybutu <link> lub atrybutu @import. Wystarczy jeden, więc wybierz @import.
Skopiuj fragment od @import do średnika i wklej go w tagach stylów po komentarzu importu.
Ponieważ Roboto Flex jest jedyną używaną czcionką, ustaw body tak, aby wywołać font-family, dodając „Reguły CSS, aby określić rodziny”, które są uwzględnione w kodzie importu.

body {
 font-family: 'Roboto Serif', sans-serif;
 font-size: 18px;
 color: #0C332A;
 background: rgb(247, 245, 245);
}

W ten sposób zaimportujesz wybraną czcionkę i zestaw stylów, ale użycie zakresów osi umożliwia użycie ciągłego zakresu stylów zamiast poszczególnych stylów. Aby utworzyć zakres, połącz 2 wartości za pomocą kropki (np. 100..900). Upewnij się, że dodajesz tylko zakresy, które istnieją w suwakach czcionki. W przeciwnym razie czcionka nie załaduje się prawidłowo.

Ta opcja najlepiej sprawdza się w przypadku płynnych przejść animacji i eksperymentowania w przeglądarce, ponieważ wczytuje pełny zakres i zwiększa rozmiar żądania pobierania.

9. Właściwości czcionek zmiennych w CSS

Po zaimportowaniu czcionki wracamy do Figmy, aby pobrać niektóre właściwości CSS do stylizacji, i sprawdzamy właściwość CSS font-variation-settings.

Po wybraniu nagłówków h1 w panelu po prawej stronie kliknij kartę Zbadaj u góry. Panel przełączy się w tryb inspekcji kodu na potrzeby przekazania kodu deweloperowi. Kod to ostatnia sekcja.
Jeśli nie zostało to jeszcze zrobione, zmień menu formatu na CSS. Wyświetlane są atrybuty standardowe (font-weight, font-stretch, font-style, font-optical-sizing), jeśli są używane, a następnie atrybuty niskiego poziomu font-variation-settings, które zawierają niezarejestrowane osie niestandardowe. Najpierw użyj atrybutów standardowych, a dopiero potem font-variation-settings.

Figma używa font-variation-settings dla width (wdth) zamiast font-stretch.

Skopiuj ten kod CSS powiązany z typem, aby nadać styl selektorowi h1.

h1 {    
    line-height: 0;
    font-size: 36px;
    font-weight: 125;
    font-stretch: 167%;
}

Styl tytułu karty pomocy można skopiować do h2. To samo zrób w przypadku treści, kopiując ją do pola p. Style etykiet można kopiować do .label

10. Gratulacje

Gratulacje! Świetnie wykorzystaliście zmienne czcionki, nauczyliście się ich używać w swoich projektach i wdroczyliście je w internecie.

Jeśli masz pytania, skontaktuj się z nami w dowolnym momencie, wysyłając wiadomość do @MaterialDesign na Twitterze.

Więcej materiałów i tutoriali na temat projektowania znajdziesz na youtube.com/MaterialDesign.