Co to są symbole materiałowe?
Symbole materiałowe to najnowsze ikony połączone w ponad 2,5 tys. glifów z jedną czcionką o szerokiej gamie wariantów. Symbole są dostępne w trzy style i cztery zmienne osie czcionki (wypełnienie, grubość, gradacja rozmiar optyczny). Zobacz pełen zestaw symboli materiałowych w Biblioteka symboli Material Design.
Oś FILL
Wypełnienie umożliwia zmianę domyślnego stylu ikony. Pojedyncza ikona może Niewypełnione i wypełnione.
Aby przekazać przejście stanu, użyj osi wypełnienia dla animacji lub interakcji. Wartości wynoszą 0 – domyślne pole lub 1 – pełne wypełnienie. Wraz z wagą , wypełnienie wpływa też na wygląd ikony.
Oś wght
Waga określa grubość kreski symbolu, a zakres wagowy wynosi pomiędzy cienki (100) i pogrubiony (700). Waga może również wpływać na .
Oś GRAD
Waga i stopień wpływają na grubość symbolu. Korekty oceny: bardziej szczegółowe niż dostosowywanie wagi i ma niewielki wpływ na wielkość symbolem.
W przypadku niektórych czcionek tekstu ocena jest też dostępna. Możesz dopasować poziomy ocen do: tekst i symbole, aby uzyskać harmonijny efekt wizualny. Na przykład, jeśli czcionka tekstu ma wartość -25, symbole mogą dopasować ją do odpowiedniej wartości, na przykład -25.
Możesz użyć oceny do różnych potrzeb:
Niski poziom podkreślenia (np. -25 stopni): redukcja odblasków w przypadku jasnego symbolu w ciemności użyj niskiej oceny.
Duża wyróżnienie (np.200 stopni): aby wyróżnić symbol, zwiększ liczbę dodatnią. ocenę.
Oś opsz
Rozmiary optyczne: od 20 dp do 48 dp.
Aby obraz wyglądał tak samo w różnych rozmiarach, użyj grubości kreski zmienia się wraz ze skalowaniem ikony. Rozmiar optyczny umożliwia dostosuj grubość kreski po zwiększeniu lub zmniejszeniu rozmiaru symbolu.
Uzyskiwanie symboli materiałowych
Symbole materiałowe są dostępne w kilku formatach i pasują do różnych różnych typów projektów i platform, zarówno dla deweloperów aplikacji, w swoich makietach lub prototypach.
Licencjonowanie
Symbole materiałowe są dostępne w Licencja Apache w wersji 2.0
Przeglądanie i pobieranie pojedynczych ikon
Pełny zestaw symboli materiałowych jest dostępny w Biblioteka symboli materiałowych w formacie SVG lub PNG. Można z nich korzystać w przeglądarkach internetowych, na urządzeniach z Androidem, iOS oraz i narzędzia projektowe.
Repozytorium Git
repozytorium Git zawiera pełny zestaw symboli materiałowych w formacie SVG.
$ git clone https://github.com/google/material-design-icons
Używanie symboli materiałowych
Użyj w przeglądarce
Czcionka symboli materiałowych to najprostszy sposób na dodanie symboli materiałowych w projekty internetowe.
Ikony są układane w jedną czcionkę, co ułatwia programistom stron internetowych dodać te ikony za pomocą zaledwie kilku wierszy kodu.
Czcionka statyczna w Google Fonts
Aby skonfigurować czcionki ikon na wszystkich stronach internetowych, Czcionki Google. Dołącz ten pojedynczy wiersz kodu HTML:
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" rel="stylesheet" />
Powyższy fragment kodu zawiera domyślną konfigurację dla każdego axis, z waga w strefie 400, rozmiar optyczny ma 48 lat, ocena przy 0 i wypełnij (również 0).
Użyj Interfejs Fonts CSS API aby skonfigurować różne wartości osi. Przyjrzyj się tym przykładom:
.Zmienna czcionka Google Fonts
Jeśli animujesz ikony za pomocą CSS lub chcesz mieć dokładniejszą kontrolę nad funkcjami ikon, użyj funkcji
czcionki zmiennych symboli Google. Korzystając z zakresów w formacie number..number,
możemy wczytać całą czcionkę zmiennej. Wymelduj się
Czy mogę korzystać z obsługi czcionek zmiennych
aby zrozumieć, czy użytkownicy będą w stanie wczytać czcionkę ze zmienną,
bardzo prawdopodobne. Oto przykłady:
Albo nawet je animować!
Samodzielne hostowanie czcionki
Zorganizuj
czcionka ikony
w kontrolowanej przez Ciebie lokalizacji, aby zdecydować, kiedy zaktualizować zasób. Dla:
jeśli na przykład adres URL to https://example.com/material-symbols.woff, dodaj
tę regułę CSS:
@font-face {
font-family: 'Material Symbols Outlined';
font-style: normal;
src: url(https://example.com/material-symbols.woff) format('woff');
}
Aby poprawnie wyrenderować czcionkę, zadeklaruj reguły CSS dotyczące renderowania ikony. Te są zwykle udostępniane jako część arkusza stylów Google Fonts API, ale muszą być ręcznie uwzględnione w projektach w przypadku samodzielnego hostowania:
.material-symbols-outlined {
font-family: 'Material Symbols Outlined';
font-weight: normal;
font-style: normal;
font-size: 24px; /* Preferred icon size */
display: inline-block;
line-height: 1;
text-transform: none;
letter-spacing: normal;
word-wrap: normal;
white-space: nowrap;
direction: ltr;
}
Korzystanie z ikon w kodzie HTML
W podanych wyżej przykładach użyto funkcji typograficznej o nazwie
ligatury,
który umożliwia renderowanie glifu ikony na podstawie nazwy tekstowej.
przeglądarka automatycznie zastępuje ligaturę tekstu wektorem ikon i
zapewnia bardziej czytelny kod niż równoważne odwołanie do znaku liczbowego. Dla:
np. w kodzie HTML fragment arrow_forward będzie reprezentować ikonę,
zamiast . W przypadku innych ikon użyj etui w kształcie węża z nazwy ikony.
(np. zastąp spacje znakami podkreślenia).
Ta funkcja jest obsługiwana w większości nowoczesnych przeglądarek na komputerach i urządzeniach mobilnych urządzenia. Zobacz Czy mogę korzystać z pomocy przy ligaturach? aby zobaczyć, czy użytkownicy mogą przetwarzać ligatury, tak.
Jeśli musisz włączyć obsługę przeglądarek, które nie obsługują ligatur, podaj parametr ikony wykorzystujące numeryczną odwołania do znaków (inaczej punkty kodowe), jak w przykładzie poniżej:
Nazwy ikon i punkty kodowe znajdziesz na Biblioteka symboli materiałowych wybierając dowolną ikonę i otwierając panel czcionki ikony. Każda czcionka ikony ma własny indeksu punktów kodowych w Google Fonts, repozytorium Git z pełnym zestawem nazw i kodów znaków.
Stylizowanie ikon w stylu Material Design
Ikony te zostały zaprojektowane tak, aby były zgodne z Wytyczne dotyczące Material Design, i wyglądają najlepiej w zalecanych rozmiarach i kolorach. Style ułatwiają stosowanie zalecanych rozmiarów, kolorów i stanów aktywności.
Używaj na Androidzie
W bibliotece symboli materiałowych wszystkie ikony mają format rysowalny wektorowo. Do aby dowiedzieć się więcej, sprawdź Dokumentacja Android Vector Asset Studio.
Użyj w iOS
Ikony są również dostępne w formacie symboli Apple. Więcej informacji na ten temat znajdziesz znajdziesz oficjalne symbole Apple omówienie oraz wskazówkami na temat użytkowania.
Używaj w Flutter
Planujemy wprowadzenie obsługi symboli Material Symbols w technologii Flutter. Odpowiednie aktualizacje zostaną wkrótce opublikowane.