Google वेब फ़ॉन्ट्स से शीर्ष संस्करण के लिए by दो बार त्वरित फॉन्ट लोडिंग का एक उदाहरण, इसका इष्टतम संस्करण चुनकर

यदि आधुनिक Microsoft Corporation सॉफ़्टवेयर से लैस कंप्यूटर का उपयोगकर्ता साइक्लोपीडिया विकी साइट पर भटकता है, तो उसकी आँखें सबसे पहले और दूसरे स्तर के शीर्षकों के फ़ॉन्ट से आकर्षित होंगी (साइक्लोपीडिया, संस्कृति, समाज, विज्ञान) तकनीक "," नेचर एंड मैन "," जेनेसिस "): इस तरह के फॉन्ट अब वर्ल्ड वाइड वेब पर अक्सर नहीं मिलते हैं (जब आप स्क्रीनशॉट के टुकड़े की तुलना करते हैं, तो आप इसे आसानी से देख सकते हैं, जो मैंने अपने अनुभव से उस अधिकार से जोड़ा है)।

लेकिन यह फ़ॉन्ट, देवियों और सज्जनों, हम सभी के लिए एक उदाहरण होगा कि कैसे हमारे शीर्षकों को खींचा नहीं जाना चाहिए । क्या आप अनुमान लगा सकते हैं कि ऐसा क्यों है? हां, क्योंकि यह फ़ॉन्ट कैंडरा है (और फर्स्टहैंड को देखना कठिन नहीं है: बस " संदर्भ फ़ॉन्ट " एक्सटेंशन का सहारा लें या साइक्लोपिडिया के मुख्य पृष्ठ और इसके " अनुभाग " उप - टेम्पलेट के लिए वर्तमान विकी कोड देखें )। हममें से कुछ पहले से ही जानते हैं, या कम से कम अनुमान लगाते हैं (और अन्य लोग विकिपीडिया पर यह पता लगाने के लिए देखते हैं) कि कैंडारा एक विशिष्ट फ़ॉन्ट है जो केवल अपेक्षाकृत हाल के Microsoft उत्पादों में पाया जाता है, जैसे कि नवीनतम विंडोज (विस्टा, विंडोज 7) और Office 2007, Microsoft Powerpoint Viewer 2007 और Microsoft Office संगतता पैक के भाग के रूप में भी वितरित किया जाता है (पूर्व प्रणालियों के लिए - Windows XP के लिए, Windows 2000 के लिए)। यदि लिनक्स, या मैक, या Android, या iPhone, या iPad के साथ एक पाठक ऐसी साइट में भटकता है, तो, आप जानते हैं, उसके लिए "कंदर" लेने के लिए कहीं नहीं होगा - और शीर्षक की उपस्थिति अनिवार्य रूप से वांछित से अलग होगी।

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

शीर्षकों के लिए Google वेब फ़ॉन्ट्स के उपयोग के बारे में क्या कहा जाना चाहिए?

इसके साथ शुरू करने के लिए, यह नोट करना उचित है कि Google वेब फ़ॉन्ट्स संग्रह, सामान्य रूप से @ फॉन्ट-फेस के माध्यम से फ़ॉन्ट डाउनलोड करने के लिए, हेडर के लिए सबसे उपयुक्त है। "बैसाखी" जिसने इसे ( sIFR या Cufón की तरह ) पहले भी शीर्षकों के लिए उपयोग किया था: एक उचित साइट लेखक ने कभी भी उन्हें पृष्ठ के मुख्य पाठ के लिए उपयोग नहीं किया होगा क्योंकि विज्ञापनों और रेंडरिंग धीमा हो सकता है, और यहां तक ​​कि माउस के साथ पाठ पसंद नहीं कर सकता। हालाँकि, विचित्र रूप से पर्याप्त है, @ फॉन्ट-फेस फोंट्स का भी अपना अलग ही योगदान है - और यह उनकी एक महत्वपूर्ण राशि है।

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

ईमानदारी से, सज्जनों, मुझे इस बात का बिल्कुल सही अंदाजा नहीं है कि इन नंबरों का क्या मतलब है: Google डेवलपर्स ने उन्हें बिल्कुल भी लेबल करने की जहमत नहीं उठाई, और आप यह भी पूरी तरह सुनिश्चित नहीं कर सकते हैं कि वे कुछ डाउनलोड समय के लिए आनुपातिक हैं या डाउनलोड की गई जानकारी की मात्रा (हालांकि उत्तरार्द्ध) अधिक संभावना है)। हालाँकि, मैंने एक प्रयोग करने में संकोच नहीं किया: जब मैंने फ़ायरफ़ॉक्स का दौरा किया, तो मैंने "सामान्य 400" शैली में एकमात्र चेकमार्क छोड़ दिया (जिसके बाद "पेज लोड" सूचक ने " 90 " का मान दिखाया ) और फिर http: //onts.googleapis पर CSS कोड पढ़ा। .com / css? परिवार = PT + सेरिफ़ और इस कोड में निहित URL से फ़ॉन्ट डाउनलोड किया। WOFF फ़ाइल 43,880 बाइट्स के आकार में डाउनलोड की गई थी , इसलिए मेरे पास यह सोचने का कारण है कि यदि पेज लोड संकेतक एक निश्चित राशि दिखाता है, तो यह निश्चित रूप से WOFF प्रारूप में फ़ॉन्ट के किलोबाइट्स की संख्या नहीं है - यह शायद ईओटी प्रारूप में फ़ॉन्ट आकार के बारे में अधिक है ( जिसमें फोंट आमतौर पर WOFF की तुलना में y2 गुना अधिक वजनदार होते हैं)। वैसे, यदि आप एक्सप्लोरर के साथ एक ही पता खोलते हैं, तो सीएसएस कोड में एक और यूआरएल है जो ईओटी फ़ॉन्ट की ओर जाता है - उस फ़ॉन्ट का वजन 87 122 बाइट्स है, जिसका अर्थ है कि यह अप्रत्यक्ष रूप से मेरी धारणा की पुष्टि करता है। ("पेज लोड" सूचक को गोल किया जा सकता है।)

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

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

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

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

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

इस गैर-चयन को प्राप्त करने का तरीका Google वेब फ़ॉन्ट्स के लिए दस्तावेज़ में आसानी से पाया जाता है - अनुभाग में " अपने फ़ॉन्ट अनुरोधों को अनुकूलित करना (बीटा) "। यह पता चला है कि डाउनलोड सीएसएस कोड के URL को "पाठ" पैरामीटर के साथ पूरक किया जा सकता है, जिसमें सभी आवश्यक फ़ॉन्ट वर्ण शामिल हैं; फिर डाउनलोड किए गए फ़ॉन्ट की फ़ाइल में इनके अलावा कोई वर्ण नहीं होगा।

इस प्रकार, प्रतिष्ठित " फ़ॉन्ट-परिवार: क्यूप्रम, संस-सेरिफ़ के साथ साइट पर शीर्षक प्रदान करने से पहले ; ", सीएसएस कोड की शुरुआत में इस निर्देश को रखना सबसे उपयुक्त है:

@import url('http://fonts.googleapis.com/css?family=Cuprum&text=%D0%90%D0%91%D0%92%D0%93%D0%94%D0%95%D0%81%D0%96%D0%97%D0%98%D0%9A%D0%9B%D0%9C%D0%9D%D0%9E%D0%9F%D0%A0%D0%A1%D0%A2%D0%A3%D0%A4%D0%A5%D0%A6%D0%A7%D0%A8%D0%A9%D0%AA%D0%AB%D0%AC%D0%AD%D0%AE%D0%AF%D0%B0%D0%B1%D0%B2%D0%B3%D0%B4%D0%B5%D1%91%D0%B6%D0%B7%D0%B8%D0%BA%D0%BB%D0%BC%D0%BD%D0%BE%D0%BF%D1%80%D1%81%D1%82%D1%83%D1%84%D1%85%D1%86%D1%87%D1%88%D1%89%D1%8A%D1%8B%D1%8C%D1%8D%D1%8E%D1%8F0123456789%20%A0'); 

इस मामले में डाउनलोड की गई WOFF फ़ाइल का वॉल्यूम अनुकूलन के कारण घटकर 20,840 बाइट्स हो जाता है, अर्थात् सीमित वर्णों के चयनात्मक चयन के कारण:

• अंतरिक्ष ("% 20"), गैर-ब्रेकिंग स्पेस ("% A0");
  
• संख्या ("0123456789");
  
• लोअरकेस अक्षर: "abvgdeezhziklmnoprstufkhtschshschyyeyuu";
  
• अपरकेस अक्षर: "ABVGDEOZHZIKLMNOPRSTUFKHCHSCHSCHCHYYUYUA"।

_{बेशक, फ़ॉन्ट के साथ फ़ाइल के आकार को और कम करना संभव है - यह हासिल किया जाता है यदि पैरामीटर "पाठ" केवल कैपिटल अक्षरों को वास्तव में हेडर में उपयोग करने के लिए सीमित है, और उन सभी को सूचीबद्ध करने के लिए नहीं। हालाँकि, यह किसी भी तरह से समीचीन नहीं है, क्योंकि यह उस पृष्ठ पर शीर्षकों के संपादन को गंभीर रूप से सीमित करता है जहां फ़ॉन्ट का उपयोग किया जाता है। पत्रों में विशिष्ट बचत ob4 किलोबाइट है - जिसका अर्थ है कि यह इसके लायक नहीं है।}

उपरोक्त @import और क्यूप्रम फ़ॉन्ट के बाद के उपयोग का एक अच्छा उदाहरण ट्रेडिशन विकी का शीर्षक पृष्ठ है ।

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