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ć
@importlub<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.jsdo ładowania stylów - używa tylko najmniejszego zgodnego typu pliku
- dołącza
:rootelement 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
:rootelement z klasą. - Można użyć
*.jsfragmentu lub zewnętrznie załadowany plik*.jsplik - używa
data:font/opentypezamiast 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;
}