वेब पर टाइपोग्राफी। यांडेक्स ने फ्रंटटैक्स 2018 पर व्याख्यान दिया

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


- मेरा नाम एंटोन है, मैं Yandex.Market भागीदार इंटरफ़ेस टीम में एक इंटरफ़ेस डेवलपर के रूप में काम करता हूं। आज मैं वेब पर टाइपोग्राफी के बारे में बात करना चाहता हूं।

इससे पहले, मैं एक छोटी कहानी बताना चाहता हूं कि यह कैसे निकला कि यह विषय मेरे लिए करीब और दिलचस्प है।

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

साक्षात्कारकर्ता तुरंत मेरे साथ सहमत नहीं थे, लेकिन परिणामस्वरूप, हमें समझ में आया कि हमें हेल्वेटिका, एरियल लिखना चाहिए, न कि इसके विपरीत। तो मैं यैंडेक्स के पास गया। मैंने साक्षात्कार करना शुरू किया, इस समस्या को पाया, इसे ठीक किया। तो हमारे पास काम करने के लिए आओ, यह हमारे साथ बहुत अच्छा है।

टाइपोग्राफी पर जाने से पहले, आइए बात करते हैं कि पाठ क्या है।

टेक्स्ट

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

कौन कंपनियों में काम करता है जहां एक कॉपीराइटर या लेखक है, जो ग्रंथों में लगे हुए हैं? लगभग आधा। और आवेदन के लिए पाठ के साथ कौन आता है? साथ ही आधा।

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



बस कला महिलाओं का एक झुंड जो कार्यालय में बैठते हैं और बहुत कुशलता से काम का अनुकरण करते हैं। वास्तव में ऐसा नहीं है।

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



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

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



सेटिंग्स के साथ एक विशाल पृष्ठ, सब कुछ हमेशा की तरह है। एक लेबल, नंबर, "ऐड" बटन था, उपयोगकर्ता ने उस पर क्लिक किया, और एक टेलीफोन इनपुट दिखाई दिया।



फ़ोन नंबर दर्ज करने के बाद, उसे सहेजने के लिए ग्रे चेकमार्क पर क्लिक करना होगा।



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



हमने दोहराया UX परीक्षण किया। थोड़ा और लोगों को पता चला कि फोन नंबर कैसे बचाएं।

इस बिंदु पर, यह आपको प्रतीत हो सकता है कि हमारे उपयोगकर्ताओं को हमारे इंटरफेस के साथ बातचीत करने में कुछ समस्याएं हैं, वे किसी तरह उनका उपयोग करते हैं।



लेकिन वास्तव में, समस्या उपयोगकर्ताओं के साथ नहीं है, बल्कि हमारे साथ है, क्योंकि हम स्पष्ट रूप से उन्हें बता नहीं सकते हैं कि हम उनसे क्या चाहते हैं। इसलिए, आज यह घटक थोड़ा अलग दिखता है: सब कुछ बटन पर भी क्लिक करता है, लेकिन अब इसमें स्पष्ट बटन "रद्द करें" और "सहेजें" के साथ एक पॉपअप है।





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

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

प्रदर्शन

आइए सामान्य रूप से मानचित्रण के बारे में बात करें। यह अनुमान लगाना आसान है कि सभी प्रदर्शन नियम प्रिंट से हमारे पास आए थे।

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

इंटरनेट पर बहुत सारी पाठ्य सामग्री और सेवाएँ हैं जहाँ उपयोगकर्ता कुछ पढ़ने के लिए विशेष रूप से जाते हैं।

_{^{स्लाइड से लिंक करें}}

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

_{^{स्लाइड से लिंक करें}}

मैं एक भी व्यक्ति को नहीं जानता हूं जो विकिपीडिया पर जाता है और खुशी के साथ कुछ भी पढ़ता है। यह मुझे लगता है कि यह एक पठनीय विकल्प नहीं है, हालांकि इसे केवल दो या तीन नियमों का पालन करके तय किया जा सकता है।

पहले में प्रति पंक्ति लगभग 10 शब्द होने चाहिए।



हमें पाठ सामग्री की चौड़ाई को लगभग 80 वर्णों तक सीमित करने की आवश्यकता है। यह नियम आपके लिंटर की सेटिंग से मिलता-जुलता हो सकता है, क्योंकि कोड का प्रदर्शन, और स्वयं कोड, साथ ही साइटों पर पाठ को लिखा जाता है, ताकि यह एक व्यक्ति द्वारा आसानी से माना जा सके, न कि कंप्यूटर द्वारा।



दूसरी पंक्ति रिक्ति है। जब आपकी लाइनें एक-दूसरे के बहुत करीब होती हैं, तो उपयोगकर्ताओं को पहले से ही इस धारणा के साथ कठिनाइयों का सामना करना पड़ता है।



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





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





यह हमेशा रूसी पाठ के साथ सही ढंग से काम नहीं कर सकता है, लेकिन यह कुछ लाइनों को बचाने में मदद कर सकता है।

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

यदि आपके पास स्थैतिक पाठ है, तो आप अपने एप्लिकेशन का निर्माण करते समय इसे बदलने के लिए एक बैबल प्लगइन जोड़ सकते हैं। यदि आपका पाठ बाहरी संग्रहण में संग्रहीत है, तो ऐसा npm पैकेज काम में आ सकता है, इसके साथ, आप ग्राहक को भेजने से पहले पाठ को रूपांतरित कर सकते हैं।

वेब फोंट

यह कैसे हुआ कि हम वेब पर विभिन्न फोंट का उपयोग कर सकते हैं?

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



पहले से ही आज हमारे पास पाठ के प्रदर्शन को बदलने के लिए बड़ी संख्या में गुण हैं।



और मैं मदद नहीं कर सकता, लेकिन इस तरह की चीज को वेरिएबल फोंट के रूप में उल्लेख कर सकता हूं।

_{^{स्लाइड से लिंक करें}}

यह हमें अपने इंटरफेस के प्रदर्शन को और बदलने में मदद करता है। आज, समर्थन पहले से ही काफी अच्छा है।

_{^{स्लाइड से लिंक करें}}

पिछले कुछ वर्षों में इंटरनेट पर इस तकनीक के बारे में बड़ी मात्रा में जानकारी लिखी गई है, कि अब हम उन पर ध्यान नहीं देंगे।

फोंट

बड़ी संख्या में फोंट हैं। लेकिन मैं एक इंजीनियरिंग दृष्टिकोण से संपर्क करना चाहता था और उन्हें कई प्रकारों में विभाजित करता था।



मुझे लगता है कि हर कोई जो विनिर्देशों को पढ़ता है, और न केवल, पता है कि बॉक्स से ओएस में पहले से इंस्टॉल किए गए सिस्टम फोंट हैं; स्थापित फोंट हैं जो उपयोगकर्ता स्वतंत्र रूप से स्थापित हैं; साथ ही डाउनलोड करने योग्य या वेब फोंट, यह वह सब है जो उपयोगकर्ता आपके एप्लिकेशन पर जाकर डाउनलोड करता है।

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



और यहाँ हम एक ही एरियल देखते हैं। आगे देखना: किसी को पहले से ही पता है कि हेल्वेटिका मैकओएस पर एक सिस्टम फ़ॉन्ट है, यह कई वर्षों से वहां मौजूद है। इसलिए, कहानी में जो मैंने शुरुआत में उल्लेख किया था, मैंने कहा कि हमें हेल्वेटिका, एरियल को रिकॉर्ड करना चाहिए, न कि इसके विपरीत।

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

मुझे बहुत आश्चर्य हुआ जब मुझे एहसास हुआ कि यह w3schools के रूप में एक बहुत ही सम्मानित संसाधन से आया है, उन्हें एक बग रिपोर्ट भेजा है, लेकिन उन्होंने अभी भी इसे ठीक नहीं किया है, एह।

_{^{स्लाइड से लिंक करें}}

अब वापस फोंट पर। हम फोंट कैसे जोड़ सकते हैं? हमारे पास सीएसएस और जावास्क्रिप्ट है।



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

हमारे पास स्थानीय के रूप में ऐसा शांत सीएसएस फ़ंक्शन भी है, इसकी मदद से हम यह जांच सकते हैं कि उपयोगकर्ता के ओएस में फ़ॉन्ट मौजूद है या नहीं। लेकिन आपको वास्तव में उस पर भरोसा नहीं करना है। भले ही फोंट का एक ही नाम हो, लेकिन इसका मतलब यह नहीं है कि वे एक ही फॉन्ट हैं। इसलिए, यदि आप इसका उपयोग करते हैं, तो सावधान रहें।



यदि आपने फ़ॉन्ट की घोषणा कर दी है, तो ब्राउजर डाउनलोड न कर पाने की स्थिति में कुछ कमियां बताना न भूलें।

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



यह आपको उन ट्रैफ़िक को कम करने की अनुमति देता है जो हम उपयोगकर्ताओं को भेजते हैं।



ऊपर, हम फ़ॉन्ट को दो अलग-अलग फ़ाइलों में विभाजित कर सकते हैं, एक में केवल लैटिन वर्ण हैं, और दूसरे में - सिरिलिक। हमने उन्हें एक ही फ़ॉन्ट-परिवार का नाम दिया, ताकि ब्राउज़र समझ सके कि ये एक ही फ़ॉन्ट के हिस्से हैं। अब, अगर हमारे पास पृष्ठ पर केवल सिरिलिक वर्ण हैं, तो उपयोगकर्ता केवल दूसरी फ़ाइल डाउनलोड करेगा, जो उपयोगकर्ता द्वारा डाउनलोड किए गए ट्रैफ़िक को कम करता है।

नतीजतन, सब्मिट करना इतना मुश्किल नहीं है, इसके लिए जीयूआई और सीएलआई दोनों उपकरण हैं, उन्हें ढूंढना और उनसे निपटना मुश्किल नहीं है।

_{^{स्लाइड से लिंक: पहला , दूसरा , तीसरा , चौथा}}

आज समर्थन बहुत अच्छा है। इसे इस्तेमाल करने में शर्म न करें।

_{^{स्लाइड से लिंक करें}}

महान कहावत के बारे में मत भूलना "सात बार मापें - एक बार sabseth", अन्यथा आप एक बल्कि असहज स्थिति में पड़ सकते हैं।

_{^{स्लाइड से लिंक करें}}

हम JS का उपयोग करके भी फोंट डाउनलोड कर सकते हैं, हमारे पास इसके लिए एक FontFace API है, यह काफी समान दिखता है।



हम एक नया फ़ॉन्ट घोषित करते हैं, इसे लोड करते हैं, यह एसिंक्रोनस रूप से लोड होता है। इसके लोड होने के बाद, हम इसे पेज पर जोड़ सकते हैं।

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

खैर, हमारे पास एक सेवा है, हमने इसमें कई फोंट जोड़े हैं। और हमारे उपयोगकर्ता हमारे पेज पर आते हैं, और इस तरह की तस्वीर के साथ मिलते हैं।



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

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

_{^{स्लाइड से लिंक करें}}

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

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

_{^{स्लाइड से लिंक करें}}

आज समर्थन काफी अच्छा है, यह पहले से ही इस्तेमाल किया जा सकता है। आखिरकार, सीएसएस जेएस नहीं है, अगर अचानक ब्राउज़र को कुछ समझ में नहीं आता है - यह ठीक है, यह इस नियम को अनदेखा करेगा और आगे बढ़ेगा। ऐसे मामलों में, हमें पहले जैसा ही व्यवहार मिलता है।

महान, हमने ब्राउज़र को संकेत दिया, अब हमारे पास लगभग सभी गैर-विरासत ब्राउज़र पर समान व्यवहार है।

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



मुझे ऐसी समस्या हुई कि फ़ॉन्ट 6-7 सेकंड पर शाब्दिक रूप से आ गया, और यह सिर्फ 3 जी तेज करने के लिए नेटवर्क को थ्रॉटलिंग के साथ था, हालांकि पहला रेंडर पहले ही 2.5 सेकंड के लिए कहीं न कहीं प्रदर्शित किया गया था, और उपयोगकर्ता बस एक खाली पृष्ठ को देखता था।

ब्लू एचटीएमएल को सबसे ऊपर लोड किया जाता है, फिर बैंगनी स्टाइल चलते हैं। हमारा फ़ॉन्ट कहाँ है?



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

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

_{^{स्लाइड से लिंक करें}}

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



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

_{^{स्लाइड से लिंक करें}}

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

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

_{^{स्लाइड से लिंक करें}}

यह कभी भी करने योग्य नहीं है, क्योंकि यह है कि हम प्रत्येक प्रारूप के फोंट के लिए बहुत सारे अनुरोध भेजते हैं, हालांकि ब्राउज़र केवल एक का उपयोग करता है। उन्होंने यहां ईओटी प्रारूप क्यों जोड़ा, जिसका उपयोग केवल IE के लिए किया जाता है, जो अब विकसित नहीं है और Microsoft द्वारा समर्थित भी नहीं है? यह संभावना नहीं है कि वे हमें यह बताएंगे।

समान कोड को अधिक संभावना दिखनी चाहिए।



शायद आपके पास अन्य कार्य हैं जिन्हें आपको अपना आवेदन शुरू करने पर पूरा करना होगा? , , , , , .

— . JS, , , , , .



. , , . . Font style matcher, , CSS , , , , , , “”.

-? , , .

, . ? , , , Yandex Sans. , . , ? , , ?

«», -. , . ? , . .

, system-ui, , stage 2, , Windows, .



, , . , , . , github, Twitter, Medium. , .



, , , , bootstrap. .

, , accessibility, , , , .

? , - ?

, , -, , . , , .

, axe pa11y , accessibility test runners, CI-. . pa11y .

- . , , ? .



, , . , color picker dev tools, Chromium- — .







, , , , . , , , , , , .





, , , .

.



, localStorage, . , , . , , , - , .

, : localStorage , key-value-, — . - , , .

— . head HTML- . , . , , bounce rate. , — , , .

, , . : , 200 , . — , . , — , , svg. , . svg CSS- .

, . . , , . — svg.



. , , . — : , , , . .

. , . . , . , , .

आप संभवतः अपने कस्टम फोंट से बाहर निकल सकते हैं, ट्रैफ़िक को कम कर सकते हैं, और साइट पर अपनी सामग्री के प्रदर्शन को तेज़ कर सकते हैं। लेकिन अगर अचानक आप ऐसा नहीं कर सकते हैं, तो फोंट लोड करने और बदलने के विकल्प देखें। धन्यवाद!