Czym dokładnie jest czcionka internetowa i na czym polega konwersja?

Przeczytałem o tym kilka artykułów, ale faktyczne różnice techniczne między czcionkami internetowymi a czcionkami na pulpicie wciąż mi umykają. Im więcej czytam na ten temat, tym bardziej mam wrażenie, że nikt nie ma jasnej technicznej definicji tego, czym dokładnie jest webfont.

Kiedy przesyłam czcionkę „stacjonarną” do usługi generowania stron WWW, takiej jak FontSquirrel, co dokładnie te usługi robią z plikiem czcionek, aby stał się czcionką internetową? Jeśli podstawowym zastosowaniem tych usług jest konwersja do różnych formatów, jakie formaty są faktycznie potrzebne w nowoczesnej sieci do obsługi rozsądnej liczby przeglądarek od 2019 r.?

„Czcionka internetowa” to po prostu czcionka używana w Internecie lub w przeglądarce. To, co robią te generatory czcionek internetowych, jest po prostu ułatwiać ci życie, dając ci niezbędny css do obsługi czcionki dla odwiedzających i konwertowania czcionki na wszystkie formaty plików, których potrzebujesz, aby upewnić się, że czcionka działa w różnych przeglądarkach.

Niektóre czcionki są uważane za „bezpieczne w sieci”, ponieważ są tak popularne, że każdy komputer je ma, na przykład „Arial”. Nie musisz nic robić, ale powiedz stronie internetowej, aby użyła tej czcionki. Czcionki internetowe muszą zostać pobrane przez przeglądarkę użytkownika, ponieważ jeśli czcionka nie znajduje się na twoim komputerze, nie zobaczysz jej.

Formaty czcionek opracowane specjalnie dla Internetu, takie jak Woff, zostały zaprojektowane z myślą o małych rozmiarach plików. Czcionki Google również obsługują różne formaty, jest to tylko trochę ukryte.

Bardzo ważne jest, aby pamiętać, że niektóre czcionki mogą mieć osobną licencję na czcionki internetowe, której możesz nie mieć, nawet jeśli jesteś właścicielem plików czcionek. Podobnie jak obrazy Google ... To, że udało Ci się pobrać obraz, nie oznacza, że ​​możesz go użyć do sprzedaży wody po goleniu swojej firmy.

Developers.google.com ma dobry post, który koncentruje się na optymalizacji czcionek internetowych, ale ma też trochę podstaw.

W tym artykule jest całkiem dobry fragment na temat różnych formatów:

Obecnie w Internecie dostępne są cztery formaty kontenerów czcionek: EOT, TTF, WOFF i WOFF2. Niestety, pomimo szerokiej gamy wyborów, nie ma jednego uniwersalnego formatu, który działałby we wszystkich starych i nowych przeglądarkach: EOT to tylko IE, TTF ma częściową obsługę IE, WOFF cieszy się najszerszym wsparciem, ale nie jest dostępne w niektórych starszych przeglądarkach , a obsługa WOFF 2.0 jest w toku dla wielu przeglądarek.

Gdzie nas to opuściło? Nie ma jednego formatu, który działałby we wszystkich przeglądarkach, co oznacza, że ​​musimy dostarczyć wiele formatów, aby zapewnić spójne wrażenia

Transfonter ma również całkiem niezłą tabelę na temat obsługi przeglądarki:

Po zadaniu tego pytania przeprowadziłem bardziej szczegółowe badania, dlatego dodałem tę odpowiedź jako rodzaj dodatku do Joonas, co było dobre, ale nie odpowiedziałem na moje ostatnie pytanie wystarczająco szczegółowo:

Jeśli podstawowym zastosowaniem tych usług jest konwersja do różnych formatów, jakie formaty są faktycznie potrzebne w nowoczesnej sieci do obsługi rozsądnej liczby przeglądarek od 2019 r.?

Wielu programistów twierdzi, że WOFF i WOFF2 to jedyne formaty czcionek potrzebne w nowoczesnym tworzeniu stron internetowych . Te odpowiedzi nie są jednak dobrze pozyskane i myślę, że są nieco nadgorliwe, więc zacznijmy od przyjrzenia się faktycznym wartościom wsparcia dla WOFF i WOFF2, dzięki uprzejmości CanIUse.com, który jest standardem branżowym do dokumentowania tego coś w tym rodzaju.

Wsparcie dla WOFF2

WOFF2 ulepsza WOFF pod każdym względem, jest obsługiwany przez większość przeglądarek komputerowych wydanych po 2014 roku, ale dopiero od 2018 roku zaczął być obsługiwany przez większość przeglądarek mobilnych. Jest obsługiwany przez około 93% przeglądarek na całym świecie.

Wsparcie dla WOFF

WOFF zaczął być obsługiwany przez Internet Explorer w IE9 (wydany w 2011 r.), Co sprawia, że ​​format EOT staje się przestarzały dla wersji IE wydanych od 2011 r. Obsługiwany jest przez około 97% przeglądarek na całym świecie.

Inne przeglądarki stacjonarne zaczęły obsługiwać WOFF mniej więcej w tym samym czasie, w tym Firefox od Firefox 3.6, Chrome od Chrome 5 i Safari od 5.1 (wydane odpowiednio w 2010, 2011 i 2011 r.), Dzięki czemu formaty TTF i OTF ¹ stały się przestarzałe w poprzednich wersjach . Większość przeglądarek mobilnych obsługuje WOFF od 2013 roku.

Zastrzeżenie i wnioski

Z tego punktu widzenia łatwo jest odpisać wszystkie inne formaty jako niepotrzebne, ale oprogramowanie, które nie jest już oficjalnie obsługiwane, nigdy nie było dobrym wskaźnikiem, że nie jest już używane. Innymi słowy, globalne udostępnianie wersji przeglądarki nie jest wcale gwarantowane, że reprezentuje dane demograficzne, z których będzie korzystać Twoja witryna.

Udział wersji przeglądarki może się znacznie różnić w zależności od grupy demograficznej: czynniki takie jak kraj, klasa społeczna i dochód mają duży wpływ na to, z jakich urządzeń (a zatem i wersji przeglądarek) korzystają Twoi użytkownicy. Jako programista zastanów się, czy witryna, którą tworzysz, będzie używana przez dane demograficzne, które częściej korzystają ze starszych wersji.

Jeśli zdecydujesz, że tak jest, i potrzebujesz obsługi przeglądarek stacjonarnych starszych niż 2011 lub przeglądarek mobilnych starszych niż 2013, użyj pełnego stosu czcionek: WOFF2, WOFF, TTF (lub OTF) i EOT.

Jeśli nie potrzebujesz obsługi tych starożytnych przeglądarek i nadal jest prawdą, że bardziej niż prawdopodobne , po prostu użyj WOFF2 i WOFF jako stosu czcionek.

_{(1) TTF i OTF to tradycyjne formaty czcionek na pulpicie, a każda przeglądarka, która obsługuje jedną, obsługuje drugą, więc nigdy nie używaj obu}

Niewiele.

WOFF jest niczym innym jak skompresowanym formatem dla TTF, co powoduje mniejszy rozmiar. Elementy wewnętrzne się nie zmieniają. WOFF2 idzie nieco dalej, nieznacznie modyfikuje reprezentację czcionek, aby uzyskać większą kompresję. EOT, jako format przeznaczony tylko dla MS, w ogóle się nie liczy. SVG jest praktycznie tylko konturami, niewiele więcej, więc nie liczy się jako prawdziwa czcionka, używaj go tylko do ikon, jeśli w ogóle.

Wystarczy użyć WOFF i gotowe. Jeśli chcesz wycisnąć ostatni bajt, możesz również zaoferować WOFF2, ale różnica będzie znikoma.

Chciałbym jednak podkreślić coś naprawdę podstawowego: „webfont”, pomijając szczegóły techniczne dotyczące implementacji, to czcionka, na którą masz licencję, od jej twórcy lub właściciela praw do konkretnego zadania używania na stronie internetowej. A te będą dostępne w formacie webfont. Jeśli siedzisz przed generatorem, aby przekonwertować czcionkę na format webfont i nie jest to oprogramowanie typu open source lub takie, które sam narysowałeś, przestań! Prawie na pewno łamiesz prawo jazdy i możesz zostać pozwany. A ponieważ jest on dostępny w Internecie, ludzie mogą łatwo znaleźć to, co robisz, i porównać je z listą sprzedaży.

Zobacz np. Tego doofusa , który pracował dla Facebooka i Google'a, który nie zdawał sobie sprawy, dopóki ktoś nie powiedział mu, że technicznie używa pirackiej czcionki na swojej stronie. Miał licencję subskrypcyjną na komputer, ale nie jest to licencja na korzystanie z Internetu.