2012-03-25 25 views
7

Web sitemde özel yazı tipleri kullanıyorum. Yerel bir yazı dosyası kullanabilirsiniz:Yerel font dosyalarını veya google web yazı tiplerini kullanarak sayfa yükleme süresini düşünürsek daha etkilidir?

src: local('Ubuntu'), url('fonts/ubuntu.woff') format('woff'); 

ya da sadece google en kullanın: sayfa yüklenme süresini göz önünde bulundurarak hızlı olacaktır

src: local('Ubuntu'), url('http://themes.googleusercontent.com/static/fonts/ubuntu/v4/_xyN3apAT_yRRDeqB3sPRg.woff') format('woff'); 

?

+0

hakkında API daha iyi bir seçenek olurdu çünkü o Kullanmakta olduğunuz yazı tipinin, her kullanıcının bilgisayarında yüklü olmadığı, ancak Google api söz konusu olduğunda hiçbir fark yaratmadığı ve normalde yazı tipinin boyutunun çok büyük olmadığı, yazı tipinin yükleme hızında ve bir keresinde bir fark yaratmadığı Kullanıcı, yazı tipinin önbellekte kaydedeceği sayfayı yükler. –

+0

Web'de İçerik Teslim Ağı için arama yapın. Google veriosn daha hızlı olabilir. – HerrSerker

cevap

13

Biri Google Test Fontları'nı kullanarak, biri de yerel bir dosyayı kullanarak iki test sayfasıyla bir GAE uygulaması oluşturuyorum. Önbelleğe alma işleminin yapılmadığından emin oldum ve her sayfanın yüklenmesinin ne kadar sürdüğünü kaydettim. Bu, Chrome'da 20 kez tekrarlandı.

Sonuçlar

  • Ortalama yükleme süresi (Google Web Fonts): 486,85 msn
  • Ortalama yükleme süresi (Yerel dosyası): 563,35 msn

enter image description here

Kodu

yazı-google.html

<!DOCTYPE html> 
<html> 
    <head> 
     <title>title</title> 
     <link href='http://fonts.googleapis.com/css?family=Ubuntu' rel='stylesheet' type='text/css'> 
     <link href='both.css' rel='stylesheet' type='text/css'> 
    </head> 
    <body> 
     <h1>This is a heading</h1> 
    </body> 
</html> 

yazı-local.html

<!DOCTYPE html> 
<html> 
    <head> 
     <title>title</title> 
     <link href='fonts-local.css' rel='stylesheet' type='text/css'> 
     <link href='both.css' rel='stylesheet' type='text/css'> 
    </head> 
    <body> 
     <h1>This is a heading</h1> 
    </body> 
</html> 

yazı-local.css

@font-face { 
    font-family: 'Ubuntu'; 
    font-style: normal; 
    font-weight: normal; 
    src: local('Ubuntu'), url('ubuntu.woff') format('woff'); 
} 

both.css

h1 { 
    font-family: 'Ubuntu'; 
} 
+0

İyi bir yaklaşım, ancak gerçekten kendi sunucu kurulumunuza ve görüntüleyicinin konumuna bağlı. – alias51

İlgili konular