Sorunları hiç kullanmadan getirdiği beriCufonBen cesaret öteden kullanarak harici yazı tipi kaynakları, ama geç olarak, ben arıyordum alternatif yöntemlerin yükleme yazı tipleri için, bak bakalım bir daha iyi yol, daha iyi yöntemler var bir şekilde sadece görünen yapmadı.

Yeni yöntemleri bir sürü, ve öyle görünüyor ki her bir yöntem için varyasyonları vardır; kullanmalıyımtypekit? yagoogle webfonts(js veya css ile)? yerel olarak yazı tipleri (örneğin fontsquirrel.com oluşturulan yöntem) yükleme kullanmaya devam etmeli miyim?

En iyi alınan gibi yöntemler aşağıda, bazı testler ile birlikte bir listesini yapacağım, ama gerçekten bir webfont hareket eder? Daha yüksek bir kaynak yükü (http istekleri) taşıma ve daha az dosya biçimi türleri (daha az uyumluluk) vb ... ... gibi gözüküyor. Ama dosyalar gibi uyumsuz ve verimli bir şekilde çoğu durumda yüklenir.

1. Sadece durum ve ihtiyaç meselesi mi? Eğer öyleyse, bunlar nelerdir?
2. Bu yöntemler arasında ciddi farklar var mı?
3. Orada daha iyi bir yöntem görmedim listede var mı?
4. Ne pro/con performans için? Bak? bağımlılıklar? uyumlulukları?

Gerçekten en iyi uygulamalar için buraya bakıyorum, performans büyük bir şey ama ölçülebilirlik ve kullanım kolaylığı. Söz, bakmak ve hissetmek için değil.

Soru kodu daha kolay okunur hale getirmek için çıkardım, kod test sayfaları sağlanan görülebilir

Google CSS

• sadece kullanan harici bir stil
• en küçük tek kullanan uyumlu bir dosya türü
• @import <link> kullanın veya styleshee içeriğini (@font-face) alabilir ve doğrudan kendi stil koymak.

Test sayfa URL: http://leftdeaf.com/so/gwebfontcss.html

test sonuçları

  78ms load of html
  36ms load of css

Google JS Yöntemi

• webfont.js styleshet yüklemek için kullanır
• en küçük tek kullanan uyumlu bir dosya türü
• ekler sınıf :root element
• ekler baş yazısı.

Test sayfa URL: http://leftdeaf.com/so/gwebfontjs.html

test sonuçları

    171ms load of html
    176ms load of js
    32ms load of css

Typekit yöntemi

• sınıf :root öğe ekler.
• *.js parçacık kullanabilir veya harici olarak yüklenen dosya *.js dosya
• kullandığı yazı tipi dosyası yerine 16**.
• ekler baş yazısı
• ekler css kafa gömülü

• ekler dış kafasına stil

  kolayca ekleyebilir/typekit.com /ayarlamak, yazı tiplerini ve hedeflenen seçiciler kaldırabilirsiniz

Test sayfa URL: http://leftdeaf.com/so/typekitjs.html

test sonuçları

  169ms load of html
  213ms load of js
  31ms load of css
  3ms load of data:font/

&üssün;& Font 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)
}

&üssün;data:font yöntem&üssün;

@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;

}

test&üssün;

İlk olarak, Google'ın sunduğu bir şeyler ayarlayacağım. Aslında tarayıcınızın işleyebileceği en küçük biçim yük. WOFF küçük dosya boyutları sunar ve tarayıcınızı destekler, gördüğünüz bir şey. WOFF de oldukça yaygın olarak desteklenmektedir. Ancak, Opera'da örneğin, muhtemelen yazı tipi TrueType sürümü alırsınız.

Boyut mantığı Font Sincap o sırada çalışır neden de, ben inanıyorum vardır. Ama çoğunlukla benim bir spekülasyondur.

Eğer her istek ve byte sayıları bir ortamda çalışıyorsanız, en iyi kullanım davanız için çalıştığını öğrenmek için bazı profilleme yapmak zorunda kalacaksın. İnsanlar, tek bir sayfa görüntüleme, ve asla tekrar ziyaret edecek mi? Eğer öyleyse, önbelleğe alma kuralları çok da bir önemi yok. Eğer tarama ya dönüyorlar, Google daha iyi bir sunucu daha önbellekleme kuralları olabilir. Daha büyük sorun, gecikme, ya da bant genişliği? Eğer gecikme, daha az istekleri için amaç, bu yüzden yerel olarak ana bilgisayar ve dosyaları mümkün olduğunca birleştirin. Bant genişliği, ve en küçük yazı tipi küçük bir kod biçimi ile biter, hangisi ile gitmek.

Şimdi, CSS vs JS husustur. Hadi HTML şu parçaya bak:

<head>
    <script type="text/javascript" src="script1.js"></script>
    <link rel="stylesheet" type="text/css" href="style1.css" />
    <style type="text/css">
        @import url(style2.css);
    </style>
    <script type="text/javascript">
        (function() {
            var wf = document.createElement('script');
            wf.src = 'script2.js';
            wf.type = 'text/javascript';
            wf.async = 'true';
            var s = document.getElementsByTagName('script')[0];
            s.parentNode.insertBefore(wf, s);
        })();
    </script>
</head>

Birçok durumda, script1, style1 style2 engelleme olurdu. Bu tarayıcı kaynak yükledi kadar belge modern tarayıcılar bu biraz şekerleme rağmen) görüntülemeye devam anlamına gelir. Aslında iyi bir şey, özellikle stil ile olabilir. Stil uygulanmamış bir içerik flash engeller ve aynı zamanda stilleri (ve değişen içerik bir kullanıcı olarak gerçekten sinir bozucu) uygularken ortaya çıkabilecek dev shift engeller.

Diğer yandan, script2 engelleme olmaz. Daha sonra yüklenebilir ve tarayıcı ve belgenin geri kalanı ayrıştırma görüntülemeye devam edebilir. Bu çok yararlı olabilir.

Özellikle konuşma hakkında yazı (ve daha da özel olarak, Google'ın sunduğu), ben olsam muhtemelen sopa ile bir CSS yöntemi (ben gibi @import çünkü tutar bir tarz ve stil, ama olabilir sadece bana). JS dosyası komut dosyası tarafından yüklenen (http://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js) @font-face bildirimi daha büyük ve sadecegörünüyordaha çok bir iş gibi. Ve gerçek yazı tipi kendisi (WOFF veya TTF) yükleme şeyleri çok fazla gecikme olmamalı yani engelleme olduğuna inanmıyorum. Şahsen CDN büyük bir hayranı değilim, ama aslında GERÇEKTEN çok hızlılar. Google sunucuları, açık ara farkla en çok paylaşılan hosting yenecek ve onların tiplerini çok popüler olduğu için, insanlar bile onları zaten önbelleğe alınmış olabilir.

Ve elimde bir tek bu var.

Typekit ile hiçbir deneyimi var, benim teori yazmadım. Eğer herhangi bir yanlışlık varsa, bağımsız değişkenler için tarayıcılar arasında genellemeler saymazsak, lütfen onları hatırı noktası.