Webfonts या स्थानीय रूप से लोड किए गए फोंट?

Question 1

जब से Cufon I का उपयोग करके आने वाली परेशानियों को बाहरी फ़ॉन्ट संसाधनों का उपयोग करने से दूर किया गया, लेकिन जब तक देर हो चुकी है, मैं फोंट लोड करने के वैकल्पिक तरीकों की तलाश कर रहा हूं ताकि यह पता चले कि क्या बेहतर तरीका है; बेहतर तरीके नीले रंग से बाहर आने का एक तरीका है।

वहाँ कई नए तरीके हैं, और प्रत्येक विधि के लिए भिन्नताएं ऐसा लगता है; क्या मुझे टाइपेकिट का उपयोग करना चाहिए ? या google webfonts (js या css के साथ)? क्या मुझे स्थानीय रूप से लोडिंग फोंट (जैसे कि फोंटक्वाइरेल.कॉम जनरेटेड मेथड) का उपयोग जारी रखना चाहिए?

मैं उन तरीकों को सूचीबद्ध करूँगा जो कुछ परीक्षणों के साथ सबसे अच्छी तरह से नीचे प्राप्त होते हैं, लेकिन क्या यह वास्तव में वेबफॉन्ट में जाने लायक है? ऐसा लगता है कि यह एक उच्च संसाधन लोड (http अनुरोध) ले जाएगा और कम फ़ाइल स्वरूप प्रकार (कम संगतता) आदि होगा, लेकिन ऐसा लगता है कि फ़ाइलें अधिकांश मामलों में async और कुशलता से भरी हुई हैं।

क्या यह सिर्फ स्थिति और जरूरत का मामला है? यदि ऐसा है, तो वो क्या हैं?
क्या इन तरीकों में काफी अंतर है?
वहाँ एक बेहतर तरीका है वहाँ मैं सूचीबद्ध नहीं है?
प्रदर्शन के लिए प्रो / कोन क्या हैं? देखो? निर्भरता? compatibilities?

मैं वास्तव में यहां सर्वोत्तम अभ्यासों की तलाश कर रहा हूं, प्रदर्शन बहुत बड़ी चीज है लेकिन स्केलेबिलिटी और उपयोग में आसानी है। उल्लेख करने, देखने और महसूस करने के लिए नहीं।

Google सीएसएस

केवल बाहरी स्टाइलशीट का उपयोग करता है
केवल छोटी संगत फ़ाइल प्रकार का उपयोग करता है
स्टाइलशी की सामग्री का उपयोग कर सकते हैं @importया <link>ले सकते हैं ( @font-face) और इसे सीधे अपनी स्टाइलशीट में डाल सकते हैं।

परीक्षण के परिणाम

  78ms load of html
  36ms load of css

यहां छवि विवरण दर्ज करें

Google JS Method

webfont.jsस्टाइल लोड करने के लिए उपयोग करता है
केवल छोटी संगत फ़ाइल प्रकार का उपयोग करता है
:rootकक्षा के साथ तत्व जोड़ता है
स्क्रिप्ट को सिर से जोड़ता है।

परीक्षण के परिणाम

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

यहां छवि विवरण दर्ज करें

टाइपेकिट विधि

:rootकक्षा के साथ तत्व जोड़ता है ।
*.jsस्निपेट या बाहरी रूप से भरी हुई फ़ाइल *.jsफ़ाइल का उपयोग कर सकते हैं
data:font/opentypeफ़ॉन्ट फ़ाइल के बजाय का उपयोग करता है ।
स्क्रिप्ट को सिर से जोड़ता है
सिर पर एम्बेडेड सीएसएस जोड़ता है
बाहरी स्टाइलशीट को सिर से जोड़ता है

आप आसानी से जोड़ / हटा / समायोजित कर सकते हैं फोंट और लक्षित चयनकर्ताओं से typekit.com

परीक्षण के परिणाम

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

यहां छवि विवरण दर्ज करें

... और फ़ॉन्ट गिलहरी विधि

@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)
}

... या डेटा के साथ: फ़ॉन्ट विधि ...

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

}

Question 2

सबसे पहले, मैं Google की पेशकश के बारे में कुछ स्पष्ट करूँगा। यह वास्तव में आपके ब्राउज़र को संभालने वाले सबसे छोटे प्रारूप को लोड करेगा। WOFF छोटे फ़ाइल आकार प्रदान करता है, और आपका ब्राउज़र इसका समर्थन करता है, इसलिए यह वही है जो आप देखते हैं। WOFF भी काफी व्यापक रूप से समर्थित है। हालांकि, उदाहरण के लिए ओपेरा में, आपको संभवतः फ़ॉन्ट का ट्रू टाइप संस्करण मिल जाएगा।

फ़ाइल साइज़ लॉजिक भी है, मेरा मानना है कि क्यों फॉन्ट गिलहरी उन्हें उसी क्रम में आज़माती है। लेकिन वह ज्यादातर मेरी ओर से अटकलें हैं।

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

अब, सीएसएस बनाम जेएस विचार पर। आइए HTML के निम्नलिखित भाग को देखें:

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

कई मामलों में, script1, style1, और style2अवरुद्ध हो जाएगा। इसका मतलब है कि ब्राउज़र दस्तावेज़ को तब तक प्रदर्शित करना जारी नहीं रख सकता है जब तक कि संसाधन लोड नहीं हो जाता है (हालांकि आधुनिक ब्राउज़र इसे थोड़ा सा ठगते हैं)। जो वास्तव में एक अच्छी बात हो सकती है, खासकर स्टाइलशीट के साथ। यह अस्थिर सामग्री के फ़्लैश को रोकता है, और यह शैलियों को लागू करते समय होने वाली विशाल पारी को भी रोकता है (और सामग्री को स्थानांतरित करना वास्तव में एक उपयोगकर्ता के रूप में कष्टप्रद है)।

दूसरी ओर, script2अवरुद्ध नहीं किया जाएगा। इसे बाद में लोड किया जा सकता है, और ब्राउज़र बाकी दस्तावेज़ को पार्स करने और प्रदर्शित करने के लिए आगे बढ़ सकता है। तो वह भी फायदेमंद हो सकता है।

विशेष रूप से फोंट (और विशेष रूप से, Google की पेशकश) के बारे में बात करते हुए, मैं शायद एक सीएसएस विधि के साथ चिपकेगा (मुझे पसंद है @importक्योंकि यह स्टाइलशीट के साथ स्टाइल रखता है, लेकिन यह सिर्फ मेरे लिए हो सकता है)। स्क्रिप्ट द्वारा लोड की गई JS फाइल ( http://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js ) @font-faceघोषणा से बड़ी है , और बस बहुत अधिक काम की तरह लग रही है। और मुझे विश्वास नहीं है कि वास्तविक फॉन्ट को लोड करना स्वयं (WOFF या TTF) अवरुद्ध है, इसलिए इससे चीजों में बहुत अधिक देरी नहीं होनी चाहिए। मैं व्यक्तिगत रूप से सीडीएन का बहुत बड़ा प्रशंसक नहीं हूं, लेकिन तथ्य यह है कि वे वास्तव में तेज हैं। Google के सर्वर भूस्खलन द्वारा सबसे साझा होस्टिंग योजनाओं को हरा देंगे, और क्योंकि उनके फोंट बहुत लोकप्रिय हैं, इसलिए लोग उन्हें पहले ही कैश कर सकते हैं।

और यह सब मुझे मिल गया है।

मुझे टाइपेकिट के साथ कोई अनुभव नहीं है, इसलिए मैंने इसे अपने सिद्धांत से बाहर कर दिया। यदि कोई अशुद्धि है, तो तर्क के लिए ब्राउज़रों के बीच सामान्यीकरणों की गणना नहीं करें, कृपया उन्हें इंगित करें।

Question 3

मुझे लगता है कि आपने अपने प्रश्न में लोड समय को बहुत अच्छी तरह से संबोधित किया है। मेरे दृष्टिकोण से, कुछ स्रोत हैं जिन्हें सूची में जोड़ा जाना चाहिए, और कुछ अन्य विचार जो विकल्पों की पूरी जानकारी प्राप्त करने के लिए जांच की जानी चाहिए।

कुछ अन्य सम्मानित फ़ॉन्ट स्रोत

cloud.typography

http://www.typography.com/cloud/

मैं जो बता सकता हूं, उससे फोंट को सीएसएस फ़ाइल में डेटा के रूप में एम्बेड किया गया है:

@font-face{ 
    font-family: "Font Name"; 
    src: url(data:application/x-font-woff;base64,d09GRk9UVE8AACSCAA0AAAAARKwAAQAAAAAiVAAAAi4AAAadAAAAAAAAAABDRkYgAAAIyAAAFCgAABmIK5m+CkdERUYAABzwAAAAHQAAACAAXQAER1BPUwAAHRAAAAQlAAAYAq+OkMNHU1VC ... ); 
    font-weight:400; font-style:normal; 
}

यहाँ मेरा चश्मा हैं:

94ms load of css from their server
37ms load of css from our server (will vary based on your configuration)
195ms load of data:fonts from our server (will vary based on your configuration)

यहाँ उनकी तैनाती का बहुत उच्च-स्तरीय वर्णन है ।

Fonts.com

मैंने इस सेवा का उपयोग नहीं किया है, लेकिन वे बहुत स्थापित फ़ॉन्ट विक्रेता हैं, और उन्होंने अपनी साइट पर जो जानकारी सूचीबद्ध की है वह काफी प्रभावशाली है। मेरे पास उनके सटीक तरीकों पर चश्मा नहीं है, लेकिन यहां मुझे पता है कि उनके पास क्या है:

उपलब्ध दुनिया में सबसे प्रसिद्ध फोंट में से कुछ
वास्तव में बड़ा फ़ॉन्ट लाइब्रेरी (20,000 से अधिक)
मॉकअप बनाने के लिए डेस्कटॉप फ़ॉन्ट डाउनलोड
ब्राउज़र में वेब फोंट के परीक्षण के लिए एक कस्टम उपकरण
ललित टाइपोग्राफी नियंत्रण और उपसमुच्चय
स्वयं की मेजबानी के विकल्प

FontSpring

FontSquirrel के साथ संबद्ध। एक निश्चित मूल्य के लिए यहां फ़ॉन्ट्स खरीदे जा सकते हैं। फ़ॉन्ट फ़ाइलें एक सीएसएस के साथ वितरित की जाती हैं, अपने सर्वर पर तैनात करने के लिए, FontSquirrel की तरह।

विस्तारित चश्मा

प्रत्येक फॉन्ट सेवा के समग्र पेशेवरों और विपक्षों के अनुसार, यहाँ कुछ तुलनाएँ हैं:

फ़ॉन्ट लाइब्रेरी का आकार

Fonts.com : 20,000+
FontSpring : 1000+
FontSquirrel : 300+
गूगल : ६००+
टाइपटेकिट : 900+
Typography.com (cloud.typography.com): शायद 300+ (35 परिवार)

मूल्य निर्धारण

Fonts.com : 500,000 पेज व्यू के लिए $ 20 / महीना
FontSpring : फ़ॉन्ट द्वारा भिन्न (फ़ॉन्ट की एक बार खरीद)
FontSquirrel : नि: शुल्क
Google : नि: शुल्क
टाइपेकिट : 500,000 पृष्ठ दृश्यों के लिए $ 4 / माह
टाइपोग्राफी.कॉम : 1,000,000 पेज व्यू के लिए $ 12.50 / महीना

फ़ॉन्ट गुणवत्ता

वेब फोंट की गुणवत्ता काफी भिन्न हो सकती है। यह अक्षर या खुद की रिक्ति या वर्ण सेट के आकार जैसी चीजों को शामिल कर सकता है। ये सभी गुणवत्ता के समग्र प्रभाव को निर्धारित करते हैं जो एक फ़ॉन्ट देगा। जबकि नि: शुल्क विकल्पों में कुछ अच्छे विकल्प हैं, उनके पास कुछ फोंट भी हैं जो उच्च गुणवत्ता वाले नहीं हैं, इसलिए आप उन स्रोतों से सावधानी से चुनना चाहते हैं।

Fonts.com : उच्च
FontSpring : मिश्रित उच्च करने के लिए
FontSquirrel : मिश्रित
गूगल : मिश्रित
टाइपेकिट : उच्च
टाइपोग्राफी.कॉम : बहुत अधिक (मैं इसे "बहुत उच्च" पदनाम देता हूं क्योंकि Fonts.com, FontSpring, और Typekit कई प्रकार की ढलाई का समर्थन करते हैं, जहां यह केवल H & FJ फाउंड्री से फोंट है, जो दुनिया में सर्वश्रेष्ठ में से है)

फ़ॉन्ट गुणवत्ता II: टाइपोग्राफी

डेस्कटॉप टाइपोग्राफी में बहुत सारे परिशोधन हैं जिन्हें वेब फोंट में प्राप्त करना वास्तव में कठिन है। इनमें से कुछ सेवाएं उन तक पहुंचाने के तरीके प्रदान करती हैं।

Fonts.com : कर्निंग, लेटरस्पेसिंग , लिगिंग्स , वैकल्पिक वर्ण, अंश, आदि।
FontSpring : कोई नहीं
FontSquirrel : कोई नहीं
गूगल : कोई नहीं
टाइपकिट : कोई नहीं
टाइपोग्राफी डॉट कॉम: छोटे कैप, लिगर्स, वैकल्पिक अक्षर, वैकल्पिक संख्या शैली, अंश, आदि।

ब्राउज़र का समर्थन

यह ज्यादातर उन फ़ॉन्ट प्रारूपों के लिए आता है जो प्रत्येक सेवा द्वारा समर्थित हैं। इनमें प्रमुख हैं:

EOT: इंटरनेट एक्सप्लोरर (IE 4+) के लिए
ट्रू टाइप और ओपन टाइप: पारंपरिक प्रारूप (सफारी 3.1+, एफएफ 3.5+, ओपेरा 10+)
WOFF: वेब फोंट के लिए नया मानक (FF 3.6+, Chrome 5+)
एसवीजी: आईओएस <4.2

@ फॉन्ट-फेस नियम और उपयोगी वेब फ़ॉन्ट ट्रिक्स की अधिक जानकारी

ये सभी सेवाएँ प्रमुख फ़ॉन्ट स्वरूपों का समर्थन करती हैं। स्व-होस्ट किए गए फॉन्ट के साथ, जब तक आप सही सिंटैक्स का उपयोग करते हैं तब तक आपको कवर किया जाना चाहिए। यहाँ FontSpring से बुलेटप्रूफ सिंटैक्स का 2011 का अपडेट दिया गया है :

@font-face {
  font-family: 'MyWebFont';
  src: url('webfont.eot'); /* IE9 Compat Modes */
  src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('webfont.woff') format('woff'), /* Modern Browsers */
       url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
  }

प्रदर्शन I: डाउनलोड

जहाँ तक मैं इसे समझता हूँ, उपर्युक्त वाक्यविन्यास का उपयोग करने से ब्राउज़र को उनके लिए काम करने वाले विशिष्ट प्रारूप को हथियाने की अनुमति मिलती है, इसलिए फ़ॉन्ट प्रारूपों पर कोई भी व्यर्थ डाउनलोड नहीं होता है जो काम नहीं करता है।

Fonts.com, Typekit, या Typography.com जैसी सशुल्क सेवाएं सही प्रारूप का पता लगाने के लिए तरीकों का उपयोग करती हैं और फिर सही फ़ॉन्ट प्रारूप प्रदान करती हैं, जिन्हें अक्सर CSS फ़ाइल में बेस 64 डेटा कहा जाता है।

मैं जो देख सकता हूं, उसमें आपके द्वारा ऊपर बताए गए तरीकों में अंतर हाई-स्पीड इंटरनेट उपयोगकर्ताओं (जैसा लगता है <200ms अंतर) के लिए काफी नगण्य है, लेकिन धीमे नेटवर्क पर उपकरणों के लिए विचार करने के लायक हो सकता है, खासकर अनकैप्ड पेज हिट्स के लिए।

प्रदर्शन II: सबसेटिंग

यदि आप जानते हैं कि केवल कुछ वर्ण ही होंगे जिनका आप उपयोग करना चाहते हैं, तो आप अपने फ़ॉन्ट को वर्णों के सबसेट के साथ बना सकते हैं और इस प्रकार डाउनलोड का आकार कम कर सकते हैं।

Fonts.com : बहुत विस्तृत नियंत्रण
FontSpring : FontSquirrel webfont जनरेटर के माध्यम से सबसेट के रूप में फिर से मिल सकता है
FontSquirrel : वेबफोंट जनरेटर के माध्यम से सबसेट के रूप में फिर से मिल सकता है
Google : बहुत विस्तृत नियंत्रण
टाइपटेकिट : "सभी वर्ण" या "डिफ़ॉल्ट" के सीमित विकल्प
Typography.com : बहुत विस्तृत नियंत्रण

प्रदर्शन III: वितरण

Fonts.com : ग्लोबल सीडीएन या अपना स्वयं का सर्वर
FontSpring : आपके सर्वर के आधार पर
FontSquirrel : आपके सर्वर पर आधारित है
Google : वैश्विक सुपर-सीडीएन
टाइपेकिट : ग्लोबल सीडीएन
टाइपोग्राफी.कॉम : ग्लोबल सीडीएन (125,000 सर्वर)

भाषा समर्थन

Fonts.com : एशियाई और मध्य पूर्वी सहित 40 भाषाएँ
FontSpring : पश्चिमी, फ़ॉन्ट पर निर्भर करता है
FontSquirrel : पश्चिमी, फ़ॉन्ट पर निर्भर करता है
Google : पश्चिमी, फ़ॉन्ट पर निर्भर करता है
टाइपेकिट : पश्चिमी, फ़ॉन्ट पर निर्भर करता है
Typography.com : पश्चिमी, फ़ॉन्ट पर निर्भर करता है

परीक्षण और कार्यान्वयन

Fonts.com : बहुत आसान, व्यापक और अनुकूलन योग्य उपकरणों के साथ
FontSpring : तकनीकी (इसे स्वयं करें)
FontSquirrel : तकनीकी (इसे स्वयं करें)
Google : आसान
टाइपेकिट : आसान
Typography.com : आसान परीक्षण, एक बार तैनात करने के लिए बदलने के लिए थोड़ा और अधिक शामिल है

Question 4

खैर, जैसे आप हैं

... यहां सर्वोत्तम प्रथाओं की तलाश, प्रदर्शन एक बड़ी बात है, लेकिन स्केलेबिलिटी और उपयोग में आसानी है। उल्लेख करने, देखने और महसूस करने के लिए नहीं।

जवाब है (जैसे वेब डिज़ाइन में हमेशा): यह निर्भर करता है!

सुनिश्चित करने के लिए एक बात यह है कि, मैं जेएस दृष्टिकोण (आपके दूसरे उदाहरण में दिखाया गया है) का उपयोग करने की सिफारिश नहीं करूंगा।

व्यक्तिगत रूप से मैं जावास्क्रिप्ट के आधार पर प्रस्तुतिकरण और सीएसएस शैलियों को बनाना पसंद करता हूं, हालांकि अधिकांश उपयोगकर्ताओं ने इसे सक्षम किया है। यह चीजों को न मिलाने का सवाल है।

और जैसा कि आप अपने दिए गए उदाहरण में देख सकते हैं कि कुछ प्रकार का FOUC (अस्थिर सामग्री का फ्लैस) है, क्योंकि पेज फ़ॉन्ट द्वारा उपलब्ध होने से पहले ही ब्राउज़र द्वारा प्रदान किया जाता है। जैसे ही यह होता है, पृष्ठ को फिर से तैयार किया जाता है। और बड़ा साइट (बड़ा) प्रभाव (बड़ा)!

इसलिए मैं कभी भी फोंट एम्बेडिंग के लिए किसी भी जेएस समाधान का उपयोग नहीं करूंगा।

अब हम शुद्ध सीएसएस विधियों पर एक नजर डालते हैं।
चूंकि काफी समय से यहां "बनाम @import" के बारे में चर्चा चल रही है। व्यक्तिगत रूप से मैं @import के उपयोग से बचना और हमेशा उपयोग करना पसंद करता हूं<link> केवल । लेकिन यह मुख्य रूप से व्यक्तिगत प्राथमिकताओं का सवाल है। एक चीज जो आपको कभी नहीं करनी चाहिए, वह है इन दोनों को मिलाना!

स्थानीय बनाम सीडीएन
जब यह तय करना है कि अपनी फ़ॉन्ट फ़ाइलों को स्थानीय रूप से होस्ट करें या सीडीएन का उपयोग करें, तो इसे अलग-अलग फोंट की संख्या और आपके द्वारा एम्बेड किए जाने वाले संबंधित फ़ॉन्ट पर निर्भर करता है।

यह महत्वपूर्ण क्यों है, या एक भूमिका निभाता है?
प्रदर्शन के दृष्टिकोण से, मैं आपके (एक) शैली पत्रक में एन्कोड किए गए फ़ॉन्ट Base64 को शामिल करने की सिफारिश करूंगा। लेकिन केवल .woff प्रारूप, क्योंकि यह लगभग सभी आधुनिक ब्राउज़रों द्वारा उपयोग किया जाता है, जिसका अर्थ है आपके अधिकांश आगंतुकों के लिए। अन्य सभी उपयोगकर्ताओं के लिए अतिरिक्त अनुरोध के साथ रहते हैं।

लेकिन Base64 एन्कोडिंग के कारण "ओवरहेड" और एक फ़ॉन्ट फ़ाइल (यहां तक कि .woff प्रारूप) के आकार के कारण इस तकनीक का केवल उपयोग किया जाना चाहिए, यदि आपके पास 3 या 4 से अधिक भिन्न फ़ॉन्ट नहीं हैं। और हमेशा सुनिश्चित करें, कि आपका सर्वर सीएसएस (सीएसएस) फाइलों को डिलीट करता है।

ऐसा करने का बड़ा लाभ यह है कि आपके पास फ़ॉन्ट फ़ाइल के लिए अतिरिक्त अनुरोध नहीं है। और पहले पेज लोड होने के बाद (कोई फर्क नहीं पड़ता कि आपकी साइट का कौन सा पेज) सीएसएस फ़ाइल कैश की गई है। यदि आप HTML5 एप्लिकेशन कैश (जो आप निश्चित रूप से करेंगे) का उपयोग करते हैं तो यह भी एक फायदा है।

इस तथ्य के अलावा, कि एक लेखक को अपनी साइट पर अधिकतम 3 या 4 विभिन्न फोंट का उपयोग नहीं करना चाहिए, आइए Google की सीडीएन का उपयोग करने की विधि पर एक नज़र डालें।

सबसे पहले अवगत रहें, कि आप (और हमेशा चाहिए) सभी वांछित फोंट को एक एकल में शामिल करें <link>, जैसे:

<link href='http://fonts.googleapis.com/css?family=PT+Serif:400,700,400italic,700italic|PT+Sans:400,700,400italic,700italic|Montez' rel='stylesheet' type='text/css'>

यह निम्नलिखित प्रतिक्रिया में परिणाम देगा:

@font-face {
  font-family: 'Montez';
  font-style: normal;
  font-weight: 400;
  src: local('Montez'), local('Montez-Regular'), url(http://themes.googleusercontent.com/static/fonts/montez/v4/Zfcl-OLECD6-4EcdWMp-Tw.woff) format('woff');
}
@font-face {
  font-family: 'PT Sans';
  font-style: normal;
  font-weight: 400;
  src: local('PT Sans'), local('PTSans-Regular'), url(http://themes.googleusercontent.com/static/fonts/ptsans/v6/LKf8nhXsWg5ybwEGXk8UBQ.woff) format('woff');
}
@font-face {
  font-family: 'PT Sans';
  font-style: normal;
  font-weight: 700;
  src: local('PT Sans Bold'), local('PTSans-Bold'), url(http://themes.googleusercontent.com/static/fonts/ptsans/v6/0XxGQsSc1g4rdRdjJKZrNBsxEYwM7FgeyaSgU71cLG0.woff) format('woff');
}
@font-face {
  font-family: 'PT Sans';
  font-style: italic;
  font-weight: 400;
  src: local('PT Sans Italic'), local('PTSans-Italic'), url(http://themes.googleusercontent.com/static/fonts/ptsans/v6/PIPMHY90P7jtyjpXuZ2cLD8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}
@font-face {
  font-family: 'PT Sans';
  font-style: italic;
  font-weight: 700;
  src: local('PT Sans Bold Italic'), local('PTSans-BoldItalic'), url(http://themes.googleusercontent.com/static/fonts/ptsans/v6/lILlYDvubYemzYzN7GbLkHhCUOGz7vYGh680lGh-uXM.woff) format('woff');
}
@font-face {
  font-family: 'PT Serif';
  font-style: normal;
  font-weight: 400;
  src: local('PT Serif'), local('PTSerif-Regular'), url(http://themes.googleusercontent.com/static/fonts/ptserif/v6/sDRi4fY9bOiJUbgq53yZCfesZW2xOQ-xsNqO47m55DA.woff) format('woff');
}
@font-face {
  font-family: 'PT Serif';
  font-style: normal;
  font-weight: 700;
  src: local('PT Serif Bold'), local('PTSerif-Bold'), url(http://themes.googleusercontent.com/static/fonts/ptserif/v6/QABk9IxT-LFTJ_dQzv7xpIbN6UDyHWBl620a-IRfuBk.woff) format('woff');
}
@font-face {
  font-family: 'PT Serif';
  font-style: italic;
  font-weight: 400;
  src: local('PT Serif Italic'), local('PTSerif-Italic'), url(http://themes.googleusercontent.com/static/fonts/ptserif/v6/03aPdn7fFF3H6ngCgAlQzBsxEYwM7FgeyaSgU71cLG0.woff) format('woff');
}
@font-face {
  font-family: 'PT Serif';
  font-style: italic;
  font-weight: 700;
  src: local('PT Serif Bold Italic'), local('PTSerif-BoldItalic'), url(http://themes.googleusercontent.com/static/fonts/ptserif/v6/Foydq9xJp--nfYIx2TBz9QFhaRv2pGgT5Kf0An0s4MM.woff) format('woff');
}

जैसा कि आप देख सकते हैं, 9 अलग-अलग फ़ॉन्ट फाइलें हैं, जिसका अर्थ है कि कुल 10 (लिंक तत्व में से एक सहित) अनुरोध, यदि उपयोगकर्ता के पास स्थानीय रूप से स्थापित एक या अधिक अनुरोधित फोंट नहीं हैं। और ये अनुरोध आपकी साइट पर हर एक नए पृष्ठ के अनुरोध पर दोहराया जाता है (हालांकि कोई और डेटा स्थानांतरित नहीं होता है)! इसके अलावा अनुरोध के जवाब <link>कभी भी कैश नहीं किया जाएगा।

अनुशंसा:
आखिरकार, मैं वास्तव में आपकी फ़ॉन्ट फ़ाइल (।) को .woff प्रारूप में शामिल करना चाहूंगा, जो आपकी शैली पत्रक में एन्कोडेड Base64 है!

एक उदाहरण के लिए यह अच्छा लेख देखें और इसे कैसे करें!

Question 5

मैं इनलाइन css पद्धति का उपयोग करता हूं क्योंकि अतिरिक्त अनुरोध का ओवरहेड साइज वृद्धि से अधिक है जब bease64 एन्कोडिंग। सीएसएस फाइलों के सर्वर द्वारा गिज़िप कंप्रेशन द्वारा आगे भी इसकी भरपाई की जाती है।

अन्य विकल्प फोंट के अतुल्यकालिक लोडिंग का उपयोग करना है, लेकिन ज्यादातर उपयोगकर्ता लोड के बाद फोंट को पॉपिंग करते देखेंगे।

विधि के बावजूद, आप फ़ॉन्ट फ़ाइल के आकार को केवल आपके द्वारा उपयोग किए जाने वाले वर्ण सेट सहित कम कर सकते हैं।

Question 6

व्यक्तिगत रूप से मैं Google फ़ॉन्ट्स का उपयोग करता हूं। उनके पास विभिन्न प्रकार के विकल्प हैं और उन्होंने हाल ही में ज़ोफ़ली संपीड़न को स्थानांतरित करके फोंट पर संपीड़न में सुधार किया है। Google तेजी से वेब बनाने के लिए प्रयासरत है, इसलिए मुझे लगता है कि उस हिस्से पर और अधिक अनुकूलन उनके लिए भी आने वाला है।

आप जो कुछ भी एक आउटसोर्स फ़ॉन्ट डिलीवरी के रूप में चुनते हैं, आपको हमेशा फोंट प्राप्त करने के अनुरोधों द्वारा गति में कमी मिलेगी। सबसे अच्छी बात, स्पीड के नजरिए से देखी गई, यह फोंट की सेवा के लिए होगी। यदि आप उन अतिरिक्त मिलीसेकेंड्स की परवाह नहीं करते हैं जो एक आउटसोर्स डिलीवरी से लोड होने में लगते हैं, तो आपको उस के साथ जाना चाहिए यदि आपको लगता है कि उनका उपयोग करने में आसानी मिलीसेकंड के लायक है।

मैं टाइपेकिट और अन्य के बारे में नहीं जानता, लेकिन Google फ़ॉन्ट्स के साथ आप विशिष्ट उपसेट और वर्णों की श्रेणी चुन सकते हैं ताकि वितरण को और भी अधिक गति मिल सके।

एक सबसेट का चयन:

<link href="http://fonts.googleapis.com/css?family=Open+Sans&subset=latin" rel="stylesheet">

पात्रों की एक श्रृंखला का चयन:

<!-- Only serve H,W,e,l,o,r and d -->
<link href="http://fonts.googleapis.com/css?family=Open+Sans&text=HelloWorld" rel="stylesheet">

फ़ॉन्ट वितरण के साथ गति को और बेहतर बनाने के लिए आप dns-prefetch का उपयोग कर सकते हैं ।

मुझे लगता है, और आशा है, कि Google अपने फ़ॉन्ट वितरण को गति देने के लिए वे सभी कर सकते हैं जितना वे कर सकते हैं। उन्हें लोड करने के लिए जो मिलीसेकंड लगता है वह मेरी वेबसाइट को नुकसान नहीं पहुंचाता है, इसलिए मैं खुशी से उनका उपयोग करता हूं।

कहानी संक्षिप्त में:

यदि मिलीसेकंड फ़ॉन्ट डिलीवरी आपकी साइट को नुकसान पहुंचा रही है, उदाहरण के लिए, इसे अनुशंसित 1 सेकंड से अधिक लोड करके, मुझे लगता है कि आपको उन्हें स्वयं होस्ट करना चाहिए।

Question 7

सबसे अच्छा विकल्प अजाक्स का उपयोग कर फोंट आयात करना है, बस इस तरह:

<script>
    (function() {
        var font = document.createElement('link'); 
        font.type = 'text/css'; 
        font.rel = 'stylesheet';
        font.href = '/url/to/font.css';
        var s = document.getElementsByTagName('link')[0]; 
        s.parentNode.insertBefore(font, s);
      })();
</script>

मैं अपने वेबपेज पर ऐसा करता हूं और Google अंतर्दृष्टि परीक्षण में 9 अंक बढ़ाता हूं।