Do font-displaydefiniuje własności jak pliki czcionek są ładowane i wyświetlane przez przeglądarkę. Jest stosowany do @font-facereguły definiującej niestandardowe czcionki w arkuszu stylów.
@font-face ( font-family: 'MyWebFont'; /* Define the custom font name */ src: url('myfont.woff2') format('woff2'), url('myfont.woff') format('woff'); /* Define where the font can be downloaded */ font-display: fallback; /* Define how the browser behaves during download */ )Wartości
font-displayWłaściwość przyjmuje pięć wartości:
auto(domyślnie): Pozwala przeglądarce na użycie domyślnej metody ładowania, która najczęściej jest podobna doblockwartości.block: Instruuje przeglądarkę, aby na krótko ukryła tekst do pełnego pobrania czcionki. Dokładniej, przeglądarka rysuje tekst za pomocą niewidocznego symbolu zastępczego, a następnie zamienia go na niestandardowy krój czcionki, gdy tylko się załaduje. Jest to również znane jako „błysk niewidocznego tekstu” lub FOIT.swap: Instruuje przeglądarkę, aby używała czcionki zastępczej do wyświetlania tekstu do pełnego pobrania czcionki niestandardowej. Jest to również znane jako „błysk nie stylizowanego tekstu” lub FOUT.fallback: Działa jako kompromis między wartościamiautoiswap. Przeglądarka ukryje tekst przez około 100 ms i, jeśli czcionka nie została jeszcze pobrana, użyje tekstu zastępczego. Po pobraniu zmieni się na nową czcionkę, ale tylko przez krótki okres wymiany (prawdopodobnie 3 sekundy).optional: Tak jakfallbackta wartość mówi przeglądarce, aby początkowo ukryła tekst, a następnie przeszła do czcionki zastępczej, aż niestandardowa czcionka będzie dostępna do użycia. Jednak ta wartość pozwala również przeglądarce określić, czy niestandardowa czcionka jest w ogóle używana, przy użyciu szybkości połączenia użytkownika jako czynnika decydującego, w przypadku gdy wolniejsze połączenia z mniejszym prawdopodobieństwem otrzymają niestandardową czcionkę.
Oto inny sposób myślenia o nich
| Blokuj okres | Okres wymiany | |
|---|---|---|
| blok | Krótki | Nieskończony |
| zamiana | Żaden | Nieskończony |
| rezerwowa | Niezwykle krótki | Krótki |
| opcjonalny | Niezwykle krótki | Żaden |
Dlaczego potrzebujemy font-display
Zanim otrzymaliśmy powszechne wsparcie @font-face, nasz arsenał typograficzny ograniczał się do czcionek lokalnych, gdzie jedynymi dostępnymi czcionkami były te, które zostały wstępnie załadowane na komputer użytkownika końcowego. Nazywamy te czcionki „bezpiecznymi dla sieci”, ponieważ przeglądarka nie musi niczego pobierać w celu ich renderowania.
Potem pojawiła się @font-facereguła, która dała projektantom stron internetowych i programistom front-end nowe możliwości typograficzne, jak nigdy dotąd. Pozwoliło nam to przesłać pliki czcionek na serwer i napisać zestaw reguł w naszych arkuszach stylów, które nazywają czcionkę i informują przeglądarkę, skąd pobrać pliki. Dało to również początek usługom takim jak Google Fonts, które dostarczały masom niestandardowe czcionki. Wreszcie pokonana została główna przeszkoda, która oddzielała projektowanie stron internetowych od projektowania do druku!
Jednak niestandardowe czcionki pojawiły się (i nadal są) kosztowne. Pliki czcionek mogą być duże, a dodatkowy czas na pobranie plików może spowolnić działanie witryny, szczególnie w przypadku urządzeń korzystających z wolniejszego połączenia sieciowego. Dodatkowy koszt dla użytkowników korzystających z planów ograniczonych danych również stał się czynnikiem.
Innym szczególnym problemem, który pojawił się w przypadku niestandardowych czcionek, jest to, co zostało nazwane „błyskiem niestylizowanego tekstu” lub w skrócie FOUT. Przeglądarki domyślnie wyświetlałyby czcionkę systemową podczas oczekiwania na pobranie niestandardowej czcionki. Umożliwiło to szybsze ładowanie stron internetowych, ale wzbudziło obawy wśród projektantów stron internetowych, którzy postrzegali to jako przechwytywanie doświadczenia użytkownika i fałszywe przedstawianie zamierzonego projektu. Współczesne przeglądarki internetowe na ogół ukrywają tekst do czasu pobrania niestandardowej czcionki, którą obecnie nazywamy „błyskiem niewidocznego tekstu” lub FOIT.
Ani FOUT, ani FOIT nie są świetne. Mamy sposoby na zoptymalizowanie wydajności niestandardowych czcionek, aby złagodzić efekty. Jednak teraz musimy font-displaypowiedzieć przeglądarce, czy wolimy FOUT, FOIT, czy nawet coś pomiędzy.
Testowanie wsparcia
Ciekawe zastrzeżenie odnotowane przez Šime Vidasa:
Wyświetlanie czcionek CSS jest
@font-facedeskryptorem, a nie właściwością, więc jego obsługi w przeglądarce nie można przetestować za pomocą zapytań funkcji (@supportsreguła CSS i CSS.supports API).
Więcej informacji
- CSS Font Rendering Controls Moduł Poziom 1 Specyfikacja: Szkic specyfikacji właściwości.
font-displaydla mas: Jeremy Wagner przedstawił nam nieruchomość tutaj w CSS-Tricks.- Stosowanie
@font-face: obszerne wyjaśnienie reguły i sprawdzonych metod korzystania z niej. - System Font Stack: Fragment umożliwiający rezygnację z czcionek niestandardowych w całości i polegający wyłącznie na czcionkach systemowych użytkownika.
- Kontrolowanie wydajności czcionek za pomocą
font-display: Świetne omówienie tego tematu przez Google.
Wsparcie przeglądarki
Te dane dotyczące obsługi przeglądarek pochodzą od Caniuse, który zawiera więcej szczegółów. Liczba wskazuje, że przeglądarka obsługuje tę funkcję w tej wersji i nowszych.
Pulpit
| Chrom | Firefox | TO ZNACZY | Brzeg | Safari |
|---|---|---|---|---|
| 60 | 58 | Nie | 79 | 11.1 |
Telefon komórkowy / tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | 11,3-11,4 |