Od czasu kłopotów spowodowanych użyciem Cufon odważyłem się odejść od korzystania z zewnętrznych zasobów czcionek, ale ostatnio szukałem alternatywnych metod ładowania czcionek, aby sprawdzić, czy jest lepszy sposób; lepsze metody pojawiają się niespodziewanie.
Istnieje wiele nowych metod i wydaje się, że istnieje wiele odmian każdej metody; Czy powinienem używać Typekit ? lub Google WebFonts (z js lub css)? czy powinienem nadal używać czcionek ładowanych lokalnie (np. metoda generowana przez fontsquirrel.com)?
Poniżej wymienię metody, które wydają się najlepiej odbierane, wraz z kilkoma testami, ale czy naprawdę warto przejść na czcionkę internetową? Wygląda na to, że przenosi większe obciążenie zasobów (żądania http) i ma mniej typów formatów plików (mniej kompatybilności) itp. Ale wygląda na to, że pliki są ładowane asynchronicznie i wydajnie w większości przypadków.
- Czy to tylko kwestia sytuacji i potrzeby? Jeśli tak, to jakie?
- Czy istnieją drastyczne różnice między tymi metodami?
- Czy jest lepsza metoda, której nie wymieniłem?
- Jakie są zalety / wady wydajności? Popatrz? zależności? kompatybilności?
Naprawdę szukam tutaj najlepszych praktyk, wydajność jest ważna, ale tak samo jak skalowalność i łatwość użytkowania. Nie wspominając o wyglądzie i odczuciu.
Google CSS
- używa tylko zewnętrznego arkusza stylów
- używa tylko najmniejszego zgodnego typu pliku
- może użyć
@import
lub<link>
lub pobrać zawartość styleshee (@font-face
) i umieścić ją bezpośrednio w swoim własnym arkuszu stylów.
Wyniki testu
78ms load of html 36ms load of css
Metoda Google JS
- używa
webfont.js
do ładowania stylów - używa tylko najmniejszego zgodnego typu pliku
- dołącza
:root
element z klasą - dodaje skrypt do głowy.
Wyniki testu
171ms load of html 176ms load of js 32ms load of css
Metoda Typekit
- dołącza
:root
element z klasą. - Można użyć
*.js
fragmentu lub zewnętrznie załadowany plik*.js
plik - używa
data:font/opentype
zamiast pliku czcionki. - dodaje skrypt do głowy
- dodaje osadzony css do głowy
dodaje zewnętrzny arkusz stylów do nagłówka
możesz łatwo dodawać / usuwać / dostosowywać czcionki i selektory docelowe z typekit.com
Wyniki testu
169ms load of html 213ms load of js 31ms load of css 3ms load of data:font/
… I metoda wiewiórki czcionek
@font-face{
font-weight:400;
font-style:normal;
font-family:open_sanslight;
src:url(../font/opensans-light-webfont.eot);
src:url(../font/opensans-light-webfont.eot?#iefix) format(embedded-opentype),
url(../font/opensans-light-webfont.woff) format(woff),
url(../font/opensans-light-webfont.ttf) format(truetype),
url(../font/opensans-light-webfont.svg#open_sanslight) format(svg)
}
… Lub z danymi: metoda czcionki…
@font-face {
font-family: 'open_sanslight';
src: url('opensans-light-webfont-f.eot');
}
@font-face {
font-family: 'open_sanslight';
src: url(data:application/x-font-woff;charset=utf-8;base64,d09GRgABAAAAAF4sABMAAAAArXQAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAABqAAAABwAAAAcZLn0KkqwK44Jq866WBSpzpsNY2IyGAhoJFBbYjuxmyns5sNa4NwldcJ7eh3Uy5gQkURIlqWzONe3HcLsDX1x/+jifDXvbzgTBjopZElndil3hJkERJkmRJkVRJk3TJkEzJkmzOc4HLXOEOF7nEX/*thisisnotafullencodingjustanexample*/bZwUnK4yS3JlTx2Sr4USKEUSbHVX9fcGNBs4fqgw+GoNHU7lKr36Eqn0lCWt6pHFpWaUlc6lS6loSxRlirLlP/uuU01dVfT7L6gPxyqraluCpgj3WtqeC1V4VBDW2N4K1r1esw/IupKp9L1FwlqnuIAAAB42j3NvQ7BUBjG8R5tTz/0u2UjNTTESYQbMGmXLiISbeI6zBYjbuWtye7CeMJxtuf3LP8ne1+IXbWa7G3TMXZru4qLZkJRW1O2wzi3I+Li2Gik5yXpYkNGXj70YU98YQLGHxwwXxIWwO8SNmAdJBzAXku4gFNI9AF38QMjTwZ9vN6yJzq9OoEB6I8VQzDYK0ZguFKMwWiumIDxTDEFk6liBqaF4gDMFFvKxAfOxFUGAAABUxSL9gAA) format('woff'),
url('opensans-light-webfont-f.ttf') format('truetype'),
url('opensans-light-webfont-f.svg#open_sanslight') format('svg');
font-weight: normal;
font-style: normal;
}
źródło
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300' rel='stylesheet'>
Georgian
Stworzyłem witrynę typu font-squirrel, tylko dla lokalnych czcionek internetowych. Używam metody font-squirrel i chciałbym zobaczyć świetną odpowiedź na to pytanie.@font-face
deklaracje kuloodporne , może znajdziesz przydatne informacje. paulirish.com/2009/bulletproof-font-face-implementation-syntaxOdpowiedzi:
Najpierw wyjaśnię coś o ofercie Google. W rzeczywistości załaduje najmniejszy format, jaki obsługuje Twoja przeglądarka. WOFF oferuje małe rozmiary plików, a Twoja przeglądarka je obsługuje, więc to ta, którą widzisz. WOFF jest również dość szeroko obsługiwany. Jednak na przykład w Operze prawdopodobnie otrzymasz wersję TrueType czcionki.
Uważam, że logika rozmiaru pliku jest również powodem, dla którego Font Squirrel wypróbowuje je w tej kolejności. Ale to głównie spekulacje z mojej strony.
Jeśli pracujesz w środowisku, w którym liczy się każde żądanie i każdy bajt, będziesz musiał przeprowadzić pewne profilowanie, aby dowiedzieć się, które z nich działa najlepiej w Twoim przypadku użycia. Czy ludzie będą przeglądać tylko jedną stronę i nigdy więcej jej nie odwiedzą? Jeśli tak, reguły buforowania nie mają tak dużego znaczenia. Jeśli przeglądają lub wracają, Google może mieć lepsze reguły buforowania niż Twój serwer. Czy opóźnienie jest większym problemem, czy też przepustowością? Jeśli opóźnienie, staraj się o mniej żądań, więc hostuj je lokalnie i łącz pliki tak często, jak to możliwe. Jeśli przepustowość, wybierz dowolną opcję, która kończy się na najmniejszym kodzie i najmniejszym formacie czcionki.
Teraz przejdźmy do rozważań dotyczących CSS vs JS. Spójrzmy na następujący fragment kodu HTML:
W wielu przypadkach
script1
,style1
istyle2
byłoby blokowanie. Oznacza to, że przeglądarka nie może kontynuować wyświetlania dokumentu, dopóki ten zasób nie zostanie załadowany (chociaż nowoczesne przeglądarki trochę to oszukują). Co może być naprawdę dobre, szczególnie w przypadku arkuszy stylów. Zapobiega flashowaniu niestylizowanych treści, a także zapobiega gigantycznym przesunięciom, które wystąpiłyby podczas stosowania stylów (a zmiana treści jest naprawdę denerwująca dla użytkownika).Z drugiej strony
script2
nie będzie blokował. Można go załadować później, a przeglądarka może przejść do analizowania i wyświetlania pozostałej części dokumentu. Więc to też może być korzystne.Mówiąc konkretnie o czcionkach (a dokładniej ofercie Google), prawdopodobnie trzymałbym się metody CSS (podoba mi się,
@import
ponieważ stylizuje się z arkuszem stylów, ale to może być tylko ja). Plik JS załadowany przez skrypt ( http://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js ) jest większy niż@font-face
deklaracja i po prostu wygląda na dużo więcej pracy. I nie uważam, że ładowanie samej czcionki (WOFF lub TTF) blokuje, więc nie powinno to zbytnio opóźniać. Osobiście nie jestem wielkim fanem CDN, ale faktem jest, że są NAPRAWDĘ szybkie. Serwery Google pokonają większość wspólnych planów hostingowych gwałtownie, a ponieważ ich czcionki są tak popularne, ludzie mogą nawet mieć je już w pamięci podręcznej.I to wszystko, co mam.
Nie mam doświadczenia z Typekitem, więc pominąłem to w moich teoretykach. Jeśli są jakieś nieścisłości, nie licząc uogólnień między przeglądarkami dla samej argumentacji, zwróć na nie uwagę.
źródło
Myślę, że w swoim pytaniu bardzo dobrze zająłeś się czasem ładowania. Z mojej perspektywy jest kilka źródeł, które należy dodać do listy, oraz kilka innych kwestii, które należy przeanalizować, aby uzyskać pełny obraz opcji.
Inne renomowane źródła czcionek
cloud.typography
http://www.typography.com/cloud/
Z tego, co wiem, czcionki są osadzone jako dane w pliku CSS:
Oto moje specyfikacje:
Oto ich bardzo ogólny opis ich rozmieszczenia .
Fonts.com
Nie korzystałem z tej usługi, ale jest to bardzo uznany dostawca czcionek, a informacje, które umieścili na swojej stronie, są imponujące. Nie mam specyfikacji ich dokładnych metod, ale wiem, że mają:
FontSpring
Powiązany z FontSquirrel. Czcionki można kupić tutaj za stałą cenę. Dostarczane są pliki czcionek wraz z towarzyszącym CSS, które można wdrożyć na własnym serwerze, podobnie jak FontSquirrel.
Rozszerzone specyfikacje
Jeśli chodzi o ogólne wady i zalety każdej usługi czcionek, oto kilka porównań:
Rozmiar biblioteki czcionek
cennik
Jakość czcionki
Jakość czcionek internetowych może się znacznie różnić. Może to obejmować takie rzeczy, jak same kształty liter, odstępy lub rozmiar zestawu znaków. Wszystko to decyduje o ogólnym wrażeniu jakości, jakie da czcionka. Chociaż darmowe opcje mają kilka dobrych opcji, mają również czcionki, które nie są tak wysokiej jakości, więc powinieneś uważnie wybierać z tych źródeł.
Jakość czcionki II: Typografia
Istnieje wiele udoskonaleń w typografii dla komputerów stacjonarnych, które były naprawdę trudne do uzyskania w czcionkach internetowych. Niektóre z tych usług oferują sposoby ich dostarczania.
Wsparcie przeglądarki
Sprowadza się to głównie do formatów czcionek obsługiwanych przez każdą usługę. Najważniejsze z nich to:
Więcej informacji na temat reguły @ Font-Face i przydatnych sztuczek dotyczących czcionek internetowych
Wszystkie te usługi obsługują główne formaty czcionek. W przypadku czcionek hostowanych na własnym serwerze, o ile używasz właściwej składni, powinieneś być objęty. Oto aktualizacja z 2011 roku kuloodpornej składni z FontSpring :
Wydajność I: Pobieranie
O ile rozumiem, użycie powyższej składni pozwala przeglądarkom na pobranie określonego formatu, który dla nich działa, więc nie ma zmarnowanych pobrań formatów czcionek, które nie działają.
Płatne usługi, takie jak Fonts.com, Typekit lub Typography.com, używają metod do wykrywania prawidłowego formatu, a następnie dostarczają odpowiedni format czcionki, często jako dane base64 w pliku CSS.
Z tego, co widzę, różnice w metodach, które wymieniłeś powyżej, są dość nieistotne dla użytkowników szybkiego internetu (wydaje się, że różnica wynosi <200 ms), ale warto je rozważyć w przypadku urządzeń w wolniejszych sieciach, szczególnie w przypadku odsłon stron niebuforowanych.
Wydajność II: Podzbiór
Jeśli wiesz, że będą tylko określone znaki, których chcesz użyć, możesz zbudować czcionkę z podzbioru znaków, a tym samym zmniejszyć rozmiar pobieranego pliku.
Performance III: Dostawa
Wsparcie językowe
Testowanie i wdrażanie
źródło
Cóż, jak chcesz
odpowiedź brzmi (jak zawsze w projektowaniu stron internetowych): To zależy!
Jedno jest pewne, że nie polecałbym korzystania z podejścia JS (pokazanego w drugim przykładzie).
Osobiście nie lubię tworzyć rzeczy prezentacyjnych i stylów CSS w zależności od Javascript, mimo że zdecydowana większość użytkowników ma go włączoną. Chodzi o to, aby nie mieszać.
I jak widać na podanym przykładzie, istnieje pewien rodzaj FOUC (flas of unstyled content), ponieważ strona jest już renderowana przez przeglądarkę, zanim czcionka jest dostępna. Jak tylko to się stanie, strona jest przerysowywana. Im większa witryna, tym większy wpływ (wydajności)!
Dlatego nigdy nie użyłbym żadnego rozwiązania JS do osadzania czcionek.
Przyjrzyjmy się teraz czystym metodom CSS.
Od dłuższego czasu trwa dyskusja o „kontra @import”. Osobiście wolę unikać używania @import i zawsze używać
<link>
tylko. Ale jest to głównie kwestia osobistych preferencji. Jedyną rzeczą, której nigdy nie powinieneś robić, jest mieszanie ich obu!Lokalna a CDN
Podejmując decyzję, czy udostępnić pliki czcionek lokalnie, czy użyć CDN, to zależy to głównie od liczby różnych czcionek i odpowiednich czcionek, które chcesz osadzić.
Dlaczego jest to ważne lub odgrywa jakąś rolę?
Z punktu widzenia wydajności, zalecałbym włączenie czcionki zakodowanej w Base64 do (jednego) arkusza stylów. Ale tylko format .woff, ponieważ jest używany przez prawie wszystkie współczesne przeglądarki, czyli przez większość odwiedzających. Wszyscy inni użytkownicy żyją z dodatkową prośbą.
Jednak ze względu na "narzut" spowodowany kodowaniem Base64 i rozmiarem pliku czcionki (nawet w formacie .woff), ta technika powinna być używana tylko wtedy, gdy masz nie więcej niż 3 lub 4 różne czcionki. I zawsze upewnij się, że twój serwer dostarcza pliki (CSS) spakowane gzipem.
Dużą zaletą takiego rozwiązania jest to, że nie masz dodatkowego żądania dotyczącego pliku czcionki. A po pierwszym załadowaniu strony (bez względu na to, która strona Twojej witryny) plik CSS jest buforowany. Jest to również zaletą, jeśli używasz pamięci podręcznej aplikacji HTML5 (co z pewnością zrobisz).
Oprócz tego, że autor nie powinien używać więcej niż 3 lub 4 różnych czcionek na swojej stronie, przyjrzyjmy się metodzie korzystania z CDN Google.
Przede wszystkim pamiętaj, że możesz (i zawsze powinieneś) dołączyć wszystkie pożądane czcionki do jednego
<link>
, na przykład:Spowoduje to następującą odpowiedź:
Jak widać, istnieje 9 różnych plików czcionek, co oznacza łącznie 10 żądań (w tym jeden z elementów łącza), jeśli użytkownik nie ma zainstalowanej lokalnie jednej lub więcej żądanych czcionek. Te żądania są powtarzane przy każdym żądaniu nowej strony w Twojej witrynie (chociaż nie są już przesyłane żadne dane)! Również odpowiedź na żądanie
<link>
nigdy nie jest buforowana.Zalecenie: W
końcu naprawdę polecałbym dołączyć pliki czcionek w formacie .woff zakodowanym w Base64 w arkuszu stylów!
Zobacz ten fajny artykuł, aby zobaczyć przykład i opis, jak to zrobić!
źródło
Używam metody css inline, ponieważ narzut dodatkowego żądania jest większy niż wzrost rozmiaru podczas kodowania bease64. Jest to również kompensowane przez kompresję gizip przez serwer plików css.
Inną opcją jest użycie asynchronicznego ładowania czcionek, ale najczęściej użytkownicy zobaczą czcionki pojawiające się po załadowaniu.
Niezależnie od metody możesz zmniejszyć rozmiar pliku czcionki, uwzględniając tylko te zestawy znaków, których będziesz używać.
źródło
Osobiście korzystam z Google Fonts. Mają spory wybór, a ostatnio poprawili kompresję czcionek, przechodząc również na kompresję Zopfli . Google dąży do przyspieszenia sieci, więc myślę, że w tej części również będzie pochodzić z większej optymalizacji.
Cokolwiek wybierzesz jako outsourcingowe dostarczanie czcionek, zawsze uzyskasz redukcję szybkości w związku z żądaniami uzyskania czcionek. Najlepszą rzeczą, patrząc z perspektywy szybkości, byłoby samodzielne obsługiwanie czcionek. Jeśli nie zależy Ci na tych dodatkowych milisekundach potrzebnych do załadowania z dostawy zleconej na zewnątrz, powinieneś to zrobić, jeśli uważasz, że łatwość korzystania z nich jest warta milisekund.
Nie wiem o Typekicie i innych, ale dzięki czcionkom Google możesz wybrać obsługę określonych podzbiorów i zakresu znaków, aby jeszcze bardziej przyspieszyć dostarczanie.
Wybór podzbioru:
Wybór zakresu znaków:
Możesz użyć dns-prefetch, aby jeszcze bardziej zwiększyć szybkość dostarczania czcionek.
Myślę i mam nadzieję, że Google zrobi wszystko, co w jego mocy, aby przyspieszyć dostarczanie czcionek tak bardzo, jak tylko może. Milisekundy potrzebne do ich załadowania nie szkodzą mojej stronie, więc z radością ich używam.
Krótko mówiąc:
Jeśli dostarczanie czcionek w milisekundach szkodzi Twojej witrynie, na przykład powodując, że ładuje się dłużej niż zalecana 1 sekunda, myślę, że powinieneś sam je hostować.
źródło
<link rel=dns-prefetch href='//fonts.googleapis.com'>
że używam go do analizy, mapowania ciepła i subdomen, z jakiegoś powodu nie zarejestrował się do uruchamiania zewnętrznych czcionek internetowych. A czas ładowania różni się znacznie w zależności od czcionki, przypuszczam, że jeśli używasz dość popularnej czcionki (może być buforowana) lub tylko kilku wybranych czcionek, użycie czcionek internetowych jest świetnym dość szybkim źródłem czcionek. Wkrótce opublikuję tutaj testy prędkości.Najlepszą opcją jest importowanie czcionek przy użyciu Ajax, tak jak to:
Robię to na mojej stronie i zwiększam o 9 punktów w teście Google Insights.
źródło
async
atrybutem? Robi to samo.