2012-03-25 1 views
7

मैं अपनी वेबसाइट में कस्टम फोंट का उपयोग कर रहा हूं। मैं एक स्थानीय फ़ॉन्ट फ़ाइल इस्तेमाल कर सकते हैं:स्थानीय फ़ॉन्ट फ़ाइलों या Google वेब फोंट का उपयोग करते हुए, पृष्ठ लोड समय पर विचार करने में अधिक कुशल कौन सा है?

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

या सिर्फ गूगल का उपयोग करें:

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

कौन सा तेजी से हो सकता है, पृष्ठ लोड समय पर विचार?

+0

Google API एक बेहतर विकल्प होगा क्योंकि यह माँ है y संभव है कि आपके द्वारा उपयोग किए जाने वाले फ़ॉन्ट को प्रत्येक उपयोगकर्ता के कंप्यूटर में इंस्टॉल नहीं किया गया है, लेकिन Google एपीआई के मामले में यह कोई फर्क नहीं पड़ता है और मुझे लगता है कि सामान्य रूप से फ़ॉन्ट आकार में बहुत बड़ा नहीं होता है, इसलिए फ़ॉन्ट लोडिंग गति पर कोई फर्क नहीं पड़ता और एक बार उपयोगकर्ता पृष्ठ को लोड करता है जो फ़ॉन्ट कैश मेमोरी में सहेज लेगा। –

+0

वेब पर सामग्री वितरण नेटवर्क के लिए खोजें। Google veriosn तेज़ हो सकता है। – HerrSerker

उत्तर

13

मैं एक स्थानीय फ़ाइल का उपयोग कर दो परीक्षण पृष्ठों, एक गूगल वेब फ़ॉन्ट्स का उपयोग कर और एक के साथ एक GAE एप्लिकेशन की स्थापना की। मैंने सुनिश्चित किया कि कोई कैशिंग नहीं थी और रिकॉर्ड किया गया कि प्रत्येक पृष्ठ को कितना समय लगता है। यह क्रोम पर 20 बार दोहराया गया था।

परिणाम

  • औसत लोड समय (Google वेब फ़ॉन्ट): 486.85 एमएस
  • औसत लोड समय (स्थानीय फ़ाइल): 563.35 एमएस

enter image description here

कोड

फोंट-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> 

फोंट-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> 

फोंट-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

अच्छा दृष्टिकोण, लेकिन यह वास्तव में आपके सर्वर सेटअप और दर्शक का स्थान पर निर्भर है। – alias51

संबंधित मुद्दे