Font-display, nowa właściwość CSS. | DailyWeb.pl

Font-display, nowa właściwość CSS.

Opublikowano 1 rok temu -


Wolne połączenie internetowe to w dzisiejszych czasach coraz mniejszy problem. Mimo wszystko jest to problem w wielu kwestiach takich jak ładowanie grafiki czy czcionek. Postanowiono rozwiązać drugi problem dodając nową właściwość font-display.

Dodając niestandardową czcionkę do strony musimy liczyć się z tym, że użytkownik może mieć problem z jej pobraniem. Co wtedy? Strona wyświetli nieostylowany tekst lub nie wyświetli go w ogóle. Zdecydowanie chcemy uniknąć takiej sytuacji za wszelką cenę. Tekst pojawiający się dopiero po załadowaniu czcionki nie dodaje stronie uroku, wręcz przeciwnie, może zniechęcić użytkownika.

W przeszłości musieliśmy używać bibliotek i API aby uniknąć takiego problemu. Koniec z tym problemem, ma go rozwiązać za nas nowa właściwość CSS - font-display. Posiada ona cztery właściwości takie jak:

-auto - Działanie jak dotychczas, tekst pozostaje niewidoczny do czasu załadowania się czcionki z serwera.

-swap - Prawdopodobnie od dziś najczęściej używana właściwość. Jeżeli czcionka nie zostanie wczytana na początku. To użyta do wyświetlenia tekstu zostanie kolejna czcionka zapisana w właściwości font-family. Po wczytaniu głównej czcionki zostanie ona podmieniona w całym dokumencie.

-fallback - Połączenie pierwszej i drugiej właściwości. Przeglądarka poczeka 100ms na wczytanie czcionki, jeżeli jej się to nie uda to skorzysta z kolejnej dostępnej czcionki w font-family. Po wczytaniu głównej czcionki tekst również zostanie podmieniony.

-optional - Działa podobnie do fallback z jedną różnicą. Jeśli przeglądarka zadecyduje, że połączenie jest zbyt wolne to całkowicie zrezygnuje z używania głównej czcionki na rzecz kolejnej w font-family.

Deklaracja wartości font-display znajduje się w @font-face, przez co nie wspiera ona alternatyw stron trzecich takich jak Google Fonts czy Typekit.
Według mnie to bardzo przydatna właściwość i na pewno będę używał jej do moich przyszłych projektów oraz wdrożę do już istniejących.