Hiç kullanarak getirdiği sorunları beri Cufon uzağa dış yazı kaynakları kullanarak elde cesaret, ama geç itibariyle, ben daha iyi bir yolu olup olmadığını görmek için yükleme yazı alternatif yöntemleri için aradım; daha iyi yöntemler birdenbire ortaya çıkmanın bir yolunu bulur.
Piyasada pek çok yeni yöntem var ve göründüğü her yöntem için varyasyonlar; Typekit kullanmalı mıyım ? veya google web yazı tipleri (js veya css ile)? Yerel olarak yüklenen yazı tiplerini kullanmaya devam etmeli miyim (ör. fontsquirrel.com tarafından oluşturulan yöntem)?
Aşağıda en çok alınan yöntemleri bazı testlerle listeleyeceğim, ancak gerçekten bir web yazı tipine geçmeye değer mi? Daha yüksek bir kaynak yükü (http istekleri) taşıyacak ve daha az dosya biçimi türüne (daha az uyumluluk) sahip olacak gibi görünüyor. Ancak, çoğu durumda dosyalar eşzamansız ve verimli bir şekilde yüklenmiş gibi görünüyor.
- Bu sadece bir durum ve ihtiyaç meselesi mi? Eğer öyleyse, bunlar nedir?
- Bu yöntemler arasında büyük farklar var mı?
- Listelemediğim daha iyi bir yöntem var mı?
- Performansın profesyonelleri / eksileri nelerdir? Bak? bağımlılıklar? uyumluluklar?
Burada gerçekten en iyi uygulamaları arıyorum, performans önemli ama ölçeklenebilirlik ve kullanım kolaylığı da öyle. Bahsetmiyorum, bak ve hisset.
Google CSS
- yalnızca harici stil sayfası kullanır
- yalnızca en küçük uyumlu dosya türünü kullanır
- stylehee ( ) 'yi kullanabilir
@importveya<link>veya alabilir@font-faceve doğrudan kendi stil sayfanıza koyabilirsiniz.
Test sonuçları
78ms load of html
36ms load of css
Google JS Yöntemi
webfont.jsstil sayfasını yüklemek için kullanır- yalnızca en küçük uyumlu dosya türünü kullanır
:rootöğeyi sınıfla ekler- başa komut dosyası ekler.
Test sonuçları
171ms load of html
176ms load of js
32ms load of css
Typekit yöntemi
:rootöğeyi sınıf ile ekler .- kullanabilir
*.jsparçacığını veya harici olarak yüklenen dosya*.jsdosyası data:font/opentypeyazı tipi dosyası yerine kullanır .- başa komut dosyası ekler
- başa gömülü css ekler
başa harici stil sayfası ekler
typekit.com'dan yazı tiplerini ve hedeflenen seçicileri kolayca ekleyebilir / kaldırabilir / ayarlayabilirsiniz.
Test sonuçları
169ms load of html
213ms load of js
31ms load of css
3ms load of data:font/
… & Yazı Tipi Sincap Yöntemi
@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)
}
… Veya verilerle: yazı tipi yöntemi…
@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;
}