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

Migracja do czcionek zmiennych

1. Wprowadzenie

Ostatnia aktualizacja: 11.05.2022 r.

Zaakceptuj dynamiczną zmienność interfejsu dzięki zmiennym czcionkom, które pozwolą szybciej reagować w przypadku układów, motywów i ułatwień dostępu, a przy tym przyspieszyć działanie aplikacji.

Czego się nauczysz

Czym są czcionki zmienne?
Jak możesz za ich pomocą dostosować typ tekstu.
Sposób stosowania czcionek zmiennych w projektach.
Jak zaimplementować czcionki zmiennych za pomocą interfejsu Google Fonts API i CSS.

Wymagania wstępne

W tym module skupimy się na podstawowych koncepcjach projektowych.

Wiedza o skalach typów.
Wiedza o Figmie
Podstawowa znajomość języka HTML i CSS.

Czego potrzebujesz

Konto Figma
Plik Designlab Figma
Preferowany edytor kodu do witryn internetowych

2. Rozpocznij

Konfiguracja

Aby rozpocząć, musisz uzyskać dostęp do pliku Designlab Figma. Wszystko, czego potrzebujesz na potrzeby modułu, znajdziesz w pliku Figma. Możesz pobrać i zaimportować plik lub zduplikować go od społeczności Figma.

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

Duplikat od społeczności Figma

Otwórz plik Migracja do czcionek zmiennych lub wyszukaj Migracja do czcionek zmiennych w witrynie Społeczności Figma. W prawym górnym rogu kliknij Duplikuj, aby skopiować plik do plików.

Układ pliku

Przeglądając plik, zwróć uwagę na to, że zawiera on własny element, zaczynając od wprowadzenia. Każda sekcja jest podzielona na rząd połączonych ze sobą arkuszy roboczych wraz z podstawowymi pojęciami dotyczącymi sekcji, a następnie ćwiczeniami. Sekcje i ćwiczenia są od siebie uzależnione i należy je wykonywać po kolei.

Dzięki tym ćwiczeniom w Codelabs poznasz te pojęcia i ćwiczenia. Zapoznaj się z ćwiczeniami w Codelabs, aby dowiedzieć się więcej o nowych funkcjach Material You.

Począwszy od obszaru roboczego Intro (Wprowadzenie): znajdują się przyciski, które łączą obszary robocze po kolei. Aby otworzyć link, kliknij przycisk.

Sprawdź czcionkę zmiennej

Zanim zaczniemy, musimy upewnić się, że mamy zmienną czcionkę. Ten plik korzysta z programu Roboto Flex, który jest już dostępny w aplikacji Figma. Możesz go również pobrać ze strony fonts.google.com

3. Czym są czcionki zmienne?

Czcionki zmiennoprzecinkowe to nowy, innowacyjny format czcionek, który pozwala użytkownikom kontrolować typ i ikony. Roboto Serif i Roboto Flex to nowe kroje pisma o zróżnicowanej technologii czcionek, z szeroką gamą osi.

Ekspresja estetyczna i osiy

Projektanci nie są już ograniczani do starszych gotowych stylów, takich jak zwykłe, pogrubienie, kursywa itp. Zmienne w czcionkach zmiennych są kontrolowane przez osie lub wystąpienia. Jeśli tak wybierze grafik, wszystkie zmienne w projekcie typów można przypisać do osi, którą steruje użytkownik. Typowe osie to kursywa, rozmiar optyczny, skos, waga i szerokość. Są to osie zarejestrowane w usłudze porównywania cen.

Zalety

Dzięki zmiennym czcionkom możesz przesyłać wiele stylów w jednym pliku czcionek, dzięki czemu strony internetowe będą bardziej zrównoważone, mniejsze i szybsze, a projektant będzie miał większą kontrolę nad nimi.

4. Używaj różnych czcionek podczas projektowania

Zmień osie

Przyjrzyjmy się wszystkim dostępnym parametrom (lub osiom) i ich efektom. Wybierz typ po prawej stronie i otwórz okno Szczegóły typu (ikona więcej), aby otworzyć suwaki osi i przejść do kolejnych parametrów.

Waga określa grubość litery. Zapewnia pełny zakres grubości uderzeń.

Szerokość to wynik ilości miejsca w poziomie zajmowanego przez znaki kroju pisma.

Dostosowanie stylu z pionowej do skośnego znanego typografom jako „skośny” stylu. Chociaż rzadkie, Slant może działać w drugą stronę, czyli w przeciwnym razie. lub „odwróć skośny” stylu.

Ocena to dodatkowy modyfikator wagi optycznej kroju kroju, który jest niezależny od osi Waga. Waga i Ocena wpływają na grubość litery, ale korekty z użyciem opcji Ocena są znacznie bardziej szczegółowe.

Rozmiar optyczny. Dostosuj styl do określonych rozmiarów tekstu określonych w punktach. W przypadku mniejszych liter litery są zwykle optymalizowane pod kątem czytelności, co oznacza luźne odstępy, kerningi i grubsze kreski, z mniejszą ilością szczegółów. W przypadku większych rozmiarów litery są zwykle optymalizowane pod kątem nagłówków o ciemniejszych kreski, bardziej szczegółowych kształtach oraz o skrajnej grubości i szerokości.

Zapoznaj się z demonstracją czcionek zmiennych, aby wypróbować różne osie czcionek innych niż Figma.

5. Zadbaj o styl

Jeśli korzystasz z przewodnika dotyczącego stylu marki, możesz mieć ustaloną skalę typów, która pomoże Ci określić ograniczenia typograficzne. Użycie czcionek zmiennych nie oznacza rezygnacji z tej spójności. Pozwala na jeszcze większą elastyczność skalowania typów (w przypadkach użycia takich jak zwiększanie wagi w przypadku ciemnego tła) w ramach pojedynczego pliku.

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

Zacznijmy dostosowywać skalę typów za pomocą tekstu treści. Dzięki temu możemy najpierw ustawić rozmiar podstawowego typu witryny, a potem optycznie go dostosować. Wartość domyślna pola Body Large to 18pt (18pt) – wybrano i ustawioną wartość Roboto Flex. Dostosowanie w celu zwiększenia czytelności oznaczało kiedyś aktualizację rozmiaru i grubości czcionki, co wymagało użycia dodatkowego pliku czcionki, ale teraz możemy dostroić niektóre osie. Dostosuj rozmiar optyczny, nachylenie i wagę.
Kliknij Etykieta. Etykiety są bardziej przydatne i używają się w mniejszych kontekstach, takich jak przyciski. Optycznie dostosuj ocenę, aby etykieta wyświetlała się prawidłowo na kontenerach przycisków i elementach.
Doprecyzuj kryteria za pomocą wymiarów Tytuł, Nagłówek i Reklama displayowa. Wszystkie 3 służą do krótszych tekstów o średnim i wysokim stopniu podkreślenia, takich jak tytuły i sekcje stron. Nagłówek i reklama displayowa mogą być bardziej wyraziste dzięki rozmiarowi i dużej wizji. Tutaj możesz pobawić się wszystkimi osiami.
Po wybraniu typu kliknij 4 kropki i dodaj (+), aby ustawić styl tekstu, który zapewni spójne ustawienia pisania wielokrotnego użytku.

Możesz wygenerować domyślną skalę typu Material Design jako style Figma za pomocą narzędzia Material Theme Builder lub duplikować pakiet projektowy M3.

6. Zastosowano w interfejsie

Po skonfigurowaniu skali typów zastosujmy ją do elementów interfejsu, aby zaimplementować je w kodzie. Zastanów się, jak wykorzystać zmienne czcionki, aby zwiększyć wyrazistość i czytelność. Jeśli w ostatnim ćwiczeniu masz skonfigurowane style Figma, możesz je zastosować, a następnie zaktualizować osie stylu.

Przyjrzyj się elementom interfejsu po lewej stronie. Pierwsza karta zawiera informacje o rodzaju rośliny, jej opisie i tagach kategorii, a pozostałe karty zawierają instrukcje dotyczące pielęgnacji roślin. Roślina ma sens w przypadku dużego nacisku, więc użyj naszego „nagłówka”. stylu. Ustaw go jako nagłówek. Karty z informacjami o pielęgnacji również mają tytuł, ale nie są w takim samym stopniu ważne, dlatego ustaw je jako „tytuł”.
Informacje dotyczące roślin i instrukcje dotyczące roślin można przypisać do kategorii „duże”, a etykiety kategorii – jako „duże”.
Eksperymentuj z różnymi rolami i dostosowuj elementy interfejsu oraz skalę typów, aby znaleźć odpowiednią równowagę.

7. Zaimplementuj w kodzie

Wdrażanie w kodzie czcionek zmiennych w kodzie CSS działa podobnie jak w przypadku innych czcionek internetowych, które korzystają z usługi dostarczania czcionek, aby wczytywać czcionkę i dostosowywać ją za pomocą właściwości CSS.

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

Zmienne czcionki w Google Fonts

Korzystaj z Google Fonts jako usługi dostarczania czcionek, aby w łatwy sposób zaimplementować w swojej witrynie niezliczone czcionki, w tym czcionki zmienne.

Aby zobaczyć, jakie czcionki zmienne są dostępne, wejdź na stronę fonts.google.com. W sekcji wyszukiwania zaznacz Pokaż tylko czcionki zmiennych, które chcesz filtrować. Czcionki zmiennych to m.in. plac zabaw u dołu strony, na którym możesz ustawić suwaki dla każdej osi dostępnej w grupie rodzinnej.

Stylizowanie za pomocą CSS

Nie wszystkie czcionki mają tyle samo osi, które można dostosować. Obecnie najczęściej używane są Waga, Szerokość, Nachylenie, Kursywa i Rozmiar optyczny.

Można je ustawiać za pomocą podstawowych właściwości czcionek CSS, które istniały przed czcionkami zmiennych. Choć żadna z opcji nie jest jeszcze powszechnie obsługiwana (stan na maj 2022 roku), nowa właściwość font-variation-settings umożliwia ustawienie wszystkich osi.

`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`

*Orientacja skośna (slnt) i kursywa (włoski) w stylu czcionki nie jest pewna.

8. Importuj za pomocą interfejsu Google Fonts API

Korzystaliśmy tylko z czcionki Roboto, ale wszystkie dostępne teraz czcionki znajdziesz na stronie fonts.google.com.

Przez resztę ćwiczeń z programowania będziemy się trzymać Roboto i dostosujemy typ na kolejnych kartach w oparciu o poprzednie ćwiczenie.

Skopiuj ten kod zawierający przykładowy interfejs karty do wybranego internetowego 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>

Zwróć uwagę na specyfikacje stylu, które określiliśmy w ostatnim ćwiczeniu dla atrybutów headline, title, body i label. Przejdź do strony Roboto Flex. Ustaw suwaki zgodnie ze specyfikacjami ustawionymi w aplikacji Figma, a następnie Wybierz ten styl dla każdego z nich, aby dodać go do panelu bocznego.
Na panelu, w sekcji wybranych stylów, znajdź opcję Użyj w internecie. Czcionkę można dodać do kodu na dwa sposoby: za pomocą polecenia <link> lub @import. Potrzebny jest tylko jeden plik, wybierzmy @import.
Skopiuj wartość z parametru @import do średnika i wklej go między tagami stylów po komentarzu do importu.
Ponieważ jedyna używana czcionka to Roboto Flex, ustaw treść tak, aby wywoływała rodzinę czcionek, dodając „reguły CSS określające rodziny”. zawarty w kodzie importu.

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

Spowoduje to zaimportowanie wybranej czcionki i zestawu stylów, ale użycie zakresów osi pozwala używać ciągłego zakresu stylów zamiast poszczególnych stylów. Aby utworzyć zakres, połącz dwie wartości za pomocą znaku .. (np. 100–900). Upewnij się, że dodajesz tylko zakresy, które znajdują się na suwakach czcionki, ponieważ w przeciwnym razie nie załaduje się ona prawidłowo.

Najlepiej sprawdza się przy płynnych przejściach animacji i eksperymentowaniu w przeglądarce, ponieważ wczytuje się w pełnym zakresie i zwiększa rozmiar żądania pobierania.

9. Właściwości czcionki zmiennej CSS

Po zaimportowaniu czcionki wróćmy do Figmy, by pobrać właściwości CSS do stylu, i przyjrzyjmy się właściwości CSS font-variation-settings.

Zaczynając od nagłówka W panelu po prawej stronie wybrano h1, a u góry kliknij kartę Zbadaj. Spowoduje to przełączenie panelu w tryb inspekcji kodu na potrzeby przekazania dostępu w wersji deweloperskiej. Kod to ostatnia sekcja.
Zmień format menu na CSS. Atrybuty standardowe (jeśli są używane) są wymienione na liście (font-weight, font-stretch, font-style, font-optical-sizing), a następnie atrybut font-variation-settings niskiego poziomu, który zawiera niezarejestrowane osie niestandardowe. Zanim przejdziesz do usługi font-variation-settings, najpierw użyj atrybutów standardowych.

Aplikacja Figma używa ustawień odmiany czcionki jako szerokości (wdth), a nie rozciągania czcionki.

Skopiuj ten kod CSS powiązany z typem, aby dostosować styl naszego selektora h1.

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

Styl tytułu karty opieki można skopiować do usługi h2. Zrób to samo z treścią, kopiując ją do zakresu p. Style etykiet można kopiować do usługi .label

10. Gratulacje

Udało Ci się nauczyć korzystania z czcionek zmiennych, nauczyć się, jak używać ich w swoich projektach i wdrożyć je w internecie.

Jeśli masz pytania, w każdej chwili możesz je nam zadać, korzystając z konta @MaterialDesign na Twitterze.

Więcej filmów i samouczków o projektowaniu znajdziesz na stronie youtube.com/MaterialDesign.