2012-03-25 6 views
7

Ich verwende benutzerdefinierte Schriftarten auf meiner Website. Ich konnte eine lokale Schriftart-Datei verwenden:Was ist effizienter in Bezug auf Ladezeit der Seite, lokale Schriftart-Dateien oder Google Web-Schriftarten verwenden?

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

oder benutzen Sie einfach Google:

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

die schneller sein würde, Ladezeit unter Berücksichtigung?

+0

google api wäre eine bessere Option, weil es ma Es ist möglich, dass die verwendete Schriftart nicht auf dem Computer jedes Benutzers installiert ist, aber im Fall der Google API macht es keinen Unterschied, und ich denke, dass die normale Schriftart in der Größe nicht sehr groß ist, so dass die Schriftart keinen Unterschied bezüglich der Ladegeschwindigkeit macht Der Benutzer lädt die Seite, die die Schriftart im Cache-Speicher speichert. –

+0

Suchen Sie nach Content Delivery Network im Internet. Google Veriosn ist möglicherweise schneller. – HerrSerker

Antwort

13

Ich habe eine GAE-App mit zwei Testseiten eingerichtet, eine mit Google Web Fonts und eine mit einer lokalen Datei. Ich stellte sicher, dass es kein Caching gab und zeichnete auf, wie lange es dauerte, bis jede Seite geladen wurde. Dies wurde 20 Mal in Chrome wiederholt.

Ergebnisse

  • Durchschnittliche Ladezeit (Google Web Fonts): 486,85 ms
  • Durchschnittliche Ladezeit (Local-Datei): 563,35 ms

enter image description here

-Code

fonts-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> 

fonts-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> 

fonts-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

Guter Ansatz, aber es hängt wirklich von Ihrem eigenen Server-Setup und dem Standort des Viewers ab. – alias51