Domyślne ustawienie czcionki systemowej w konkretnym systemie operacyjnym może zwiększyć wydajność, ponieważ przeglądarka nie musi pobierać żadnych plików czcionek, używa już istniejącej. Dotyczy to jednak wszystkich czcionek „bezpiecznych dla sieci”. Piękno czcionek „systemowych” polega na tym, że pasują one do tego, czego używa obecny system operacyjny, dzięki czemu może wyglądać komfortowo.
Co to za czcionki systemowe? W chwili pisania tego tekstu wygląda to następująco:
| OS | Wersja | Czcionka systemowa |
|---|---|---|
| Mac OS X | kapitan | San Francisco |
| Mac OS X | Yosemite | Helvetica Neue |
| Mac OS X | Mavericks | Lucida Grande |
| Windows | Widok | Segoe UI |
| Windows | XP | Tahoma |
| Windows | 3.1 do ME | Microsoft Sans Serif |
| Android | Ice Cream Sandwich (4.0) + | Roboto |
| Android | Babeczka (1,5) do Honeycomb (3.2.6) | Droid Sans |
| Ubuntu | Wszystkie wersje | Ubuntu |
Przejdź już do fragmentu!
Powodem wprowadzenia przedmowy jest to, że pokazuje, jak głęboko może być potrzebny powrót do obsługi czcionek systemowych. Dodatkowo pomaga to pokazać, że wraz z nowymi wersjami systemu pojawiają się nowe czcionki, a tym samym możliwość aktualizacji stosu czcionek.
Metoda 1: Czcionki systemowe na poziomie elementu
Chrome i Safari niedawno dostarczyły „system-ui”, czyli ogólną rodzinę czcionek, której można używać zamiast „-apple-system” i „BlinkMacSystemFont” w poniższych przykładach. Cynk kapelusza do JJ po informacje.Jedną z metod stosowania czcionek systemowych jest bezpośrednie wywołanie ich w elemencie przy użyciu font-familywłaściwości.
GitHub używa tej metody na swojej stronie, nakładając czcionki systemowe na bodyelement:
/* System Fonts as used by GitHub */ body ( font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; )Zarówno Medium, jak i administrator WordPress stosują podobne podejście, z niewielkimi różnicami, w szczególności wsparciem dla Oxygen Sans (stworzonego dla systemu operacyjnego GNU + Linux) i Cantarell (stworzonego dla systemu operacyjnego GNOME). Ten fragment kodu również wyłącza obsługę niektórych typów emoji i symboli:
/* System Fonts as used by Medium and WordPress */ body ( font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif; )Uwaga: Ta metoda powinna być używana tylko dla font-familywłaściwości, a nie fontskrótu. Booking.com opublikował dokładny opis ostrzeżeń, które generuje, ponieważ wiodąca czcionka wydaje się być przedrostkiem dostawcy.
Metoda 2: Systemowe stosy czcionek
Ograniczeniem pierwszej metody jest to, że za każdym razem, gdy jest używany w elemencie, musisz wywoływać pełny stos czcionek, co może stać się nieporęczne i nadużyć kod, w zależności od tego, gdzie i jak jest używany.
Jonathan Neal oferuje alternatywną metodę, w której czcionki systemowe są deklarowane przy użyciu @font-face.
Zaletą jest to, że możesz raz zadeklarować czcionki, a wtedy stanie się to tym, co możesz we font-familywłaściwości zamiast długiej listy czcionek za każdym razem.
/* Define the "system" font family */ @font-face ( font-family: system; font-style: normal; font-weight: 300; src: local(".SFNSText-Light"), local(".HelveticaNeueDeskInterface-Light"), local(".LucidaGrandeUI"), local("Ubuntu Light"), local("Segoe UI Light"), local("Roboto-Light"), local("DroidSans"), local("Tahoma"); ) /* Now, let's apply it on an element */ body ( font-family: "system"; )Zwróć uwagę, że pełny przykład Jonathana ilustruje możliwość zdefiniowania odmian systemrodziny czcionek, która została zdefiniowana w powyższym fragmencie, aby uwzględnić kursywy, pogrubienie i dodatkowe grubości.
Związane z
- Czcionki specyficzne dla systemu operacyjnego w CSS - który obejmuje metodę JavaScript do testowania używanej czcionki.
- Czcionki systemowe w formacie SVG
- Wdrażanie czcionek systemowych na Booking.com - wyciągnięta lekcja - Booking.com opowiada, w jaki sposób dowiedzieli się, że korzystanie z systemowego stosu czcionek
fontnie działa zgodnie z oczekiwaniami.