Google वेब फ़ॉन्ट्स लिंक या आयात शामिल है?

Question

Google वेब फ़ॉन्ट्स को एक पेज पर शामिल करने का पसंदीदा तरीका क्या है?

1. लिंक टैग के माध्यम से?

   <लिंक href = 'http: //fonts.googleapis.com/css? परिवार = Judson: 400,400italic, 700' rel = 'स्टाइलशीट' टाइप = 'टेक्स्ट / css'>

2. स्टाइलशीट में आयात के माध्यम से?

   @import url (http://fonts.googleapis.com/css?family=Kameron:400,700);

3. या वेब फॉन्ट लोडर का उपयोग करें

   https://developers.google.com/webfonts/docs/webfont_loader

Comments

आप इस सवाल को गूगल फोंट का उपयोग करने से पहले भी पढ़ सकते हैं। विशिष्ट परियोजना के आधार पर - यह हमेशा स्मार्ट विकल्प नहीं हो सकता है।

— ओमेरक क्रोनेन

Answer 1

90% + उन मामलों के लिए जिन्हें आप <link>टैग चाहते हैं । अंगूठे के एक नियम के रूप में, आप @importनियमों से बचना चाहते हैं क्योंकि वे सम्मिलित संसाधन के लोड को तब तक टालते हैं, जब तक कि फ़ाइल को प्राप्त नहीं किया जाता है .. और यदि आपके पास @ आयात की "निर्माण" प्रक्रिया है, तो आप वेब फोंट के साथ एक और समस्या पैदा करते हैं : Google वेबफोन्स जैसे गतिशील प्रदाता फोंट के प्लेटफ़ॉर्म-विशिष्ट संस्करणों की सेवा करते हैं, इसलिए यदि आप केवल सामग्री को इनलाइन करते हैं, तो आप कुछ प्लेटफार्मों पर टूटे फोंट के साथ समाप्त हो जाएंगे।

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

एक बार फिर, 90% मामला <link>टैग है: एक अच्छे सीडीएन का उपयोग करें और फोंट जल्दी और अधिक संभावना से नीचे आ जाएंगे, कैश से बाहर सेवा की जाएगी।

अधिक जानकारी के लिए, और Google वेब फ़ॉन्ट्स में गहराई से देखें, इस GDL वीडियो को देखें

Comments

"क्योंकि वे सम्मिलित संसाधन के लोड को तब तक टालते हैं, जब तक कि फाइल नहीं ली जाती है" - क्या यह @import का उपयोग करने का एक अच्छा कारण नहीं है? क्योंकि आम तौर पर आप सामग्री को तब तक नहीं देखना चाहते जब तक कि फ़ॉन्ट लोड न हो (उस फ़ॉन्ट झिलमिलाहट से बचने के लिए)

— एलेक्स

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

— rvighne

यह जानकारी Google वेब फ़ॉन्ट्स पेज पर होनी चाहिए। यह सिर्फ आपके लिए तीन विकल्प प्रस्तुत करता है - और कोई भी उपयोगी संकेत नहीं देता है कि किसका उपयोग करना है और कब करना है।

— गल

Google का अपना ' गेटिंग स्टार्टेड ' ट्यूटोरियल केवल <link>विधि का उपयोग करता है , इसलिए मुझे लगता है कि वह वही है जो वे अनस्पोक फैशन में सुझाते हैं

— जेम्स कुशिंग

आप जोड़ सकते हैं rel="preload"करने के लिए <link>, भी टैग, क्योंकि तब फ़ॉन्ट पाठ प्रकट होता है से पहले लोड किया जाएगा। 3perf.com/blog/link-rels

— Elijah Mock

Answer 2

यदि आप SEO (खोज इंजन अनुकूलन) और प्रदर्शन के बारे में चिंतित हैं, तो <link>टैग का उपयोग करना अच्छा है क्योंकि यह फ़ॉन्ट को लोड कर सकता है।

उदाहरण:

<link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
<link rel="preload" href="https://fonts.gstatic.com/s/quicksand/v7/6xKtdSZaM9iE8KbpRA_hK1QNYuDyPw.woff2" as="font" crossorigin>
<link rel="preload" href="https://fonts.gstatic.com/s/lato/v14/S6uyw4BMUTPHjx4wXiWtFCc.woff2" as="font" crossorigin>
<style>
@font-face {
 font-family: 'Lato';
 font-style: normal;
 font-weight: 400;
 src: local('Lato Regular'), local('Lato-Regular'), url(https://fonts.gstatic.com/s/lato/v14/S6uyw4BMUTPHjx4wXiWtFCc.woff2) format('woff2');
 unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
 font-family: 'Quicksand';
 font-style: normal;
 font-weight: 400;
 src: local('Quicksand Regular'), local('Quicksand-Regular'), url(https://fonts.gstatic.com/s/quicksand/v7/6xKtdSZaM9iE8KbpRA_hK1QNYuDyPw.woff2) format('woff2');
 unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
</style>

अधिक जानकारी के लिए इसे पढ़ें: https://ashton.codes/preload-google-fonts-using-resource-hints/

Answer 3

<link>Google द्वारा प्रदान की गई का उपयोग करें क्योंकि फ़ॉन्ट पर संस्करण मौजूद है, लेकिन इसके ठीक ऊपर HTML5 के प्री-कनेक्ट फीचर का उपयोग करते हुए ब्राउज़रों को टीसीपी कनेक्शन खोलने के लिए कहा जाता है और SSL को font.gstatic.com के साथ अग्रिम रूप से बातचीत करने के लिए कहा जाता है। यहाँ एक उदाहरण है, जिसे स्पष्ट रूप से आपके <head></head>टैग में निवास करने की आवश्यकता है :

<link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">

Comments

क्या यह सही है कि प्रीकनेक्ट आपके उदाहरण में स्टाइलशीट लिंक की तुलना में पूरी तरह से अलग डोमेन है? fonts.gstatic.comबनामfonts.googleapis.com

— बादशाही

@BadHorsie यह पूरी बात है। Fonts.googleapis.com पर स्टाइलशीट के पास Fonts.gstatic.com पर एक संसाधन है। आप ब्राउज़र को बाद वाले होस्ट के लिए एक कनेक्शन शुरू करने के लिए कह रहे हैं ताकि यह स्टाइलशीट में लिंक को ढूंढने के समय से जुड़े या शुरू हो जाए।

— मार्क सिलिया विंसेंटी