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


15

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

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

जवाबों:


17

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

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

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

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

Developers.google.com के पास एक अच्छा पोस्ट है जो वेब फ़ॉन्ट अनुकूलन पर केंद्रित है लेकिन मूल बातें के बारे में भी कुछ है।

उस लेख में विभिन्न स्वरूपों के बारे में बहुत अच्छा अंश है:

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

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

Transfonter में ब्राउज़र समर्थन के बारे में एक बहुत अच्छी तालिका है:

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


6
वे समर्थन तालिका पुराने हैं। Caniuse.com के बजाय का उपयोग करें: caniuse.com/#search=woff2
curiousdannii

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

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

@ हाशिम, मैंने थोड़े शब्दों में खराब टिप्पणी की है। मूल पोस्ट "वेब फ़ॉन्ट क्या है" और आपके द्वारा 2019 में जिन स्वरूपों की आपको आवश्यकता है, उनके बारे में बहुत ही सटीक ढंग से सवाल किया गया था, ऐसा मुझे लगा, खासकर तब जब आप वेब फ़ॉन्ट जनरेटर के बारे में उत्सुक लग रहे थे ... और जब आप उपयोग करते हैं उन जनरेटर में से एक, वह जानकारी थोड़ी अनावश्यक हो जाती है क्योंकि यह एक क्रॉस ब्राउज़र समाधान है। लेकिन फिर आपने उस पद को बनाया जहाँ आप प्रत्येक प्रारूप को तोड़ते हैं, जिसने मुझे यह एहसास दिलाया कि उत्तर के जिस खंड की मैंने जानबूझकर उपेक्षा की है, वह मेरी अपेक्षा से बड़ा सौदा है।
Joonas

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

3

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

यदि इन सेवाओं का प्राथमिक उपयोग विभिन्न स्वरूपों में रूपांतरण है, तो 2019 तक ब्राउज़रों की उचित संख्या का समर्थन करने के लिए आधुनिक वेब पर वास्तव में किन स्वरूपों की आवश्यकता है?

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

WOFF2 के लिए समर्थन

WOFF2 WOFF पर हर तरह से सुधार करता है, 2014 के बाद जारी किए गए अधिकांश डेस्कटॉप ब्राउज़रों द्वारा समर्थित है, लेकिन 2018 के बाद से अधिकांश मोबाइल ब्राउज़रों द्वारा समर्थित होना शुरू हो गया है। यह विश्व स्तर पर अनुमानित 93% ब्राउज़रों द्वारा समर्थित है ।

WOFF के लिए समर्थन

WOFF को IE9 (2011 में जारी) में Internet Explorer द्वारा समर्थित किया जाना शुरू हुआ, जो 2011 के बाद से IE के संस्करणों के लिए अप्रचलित ईओटी प्रारूप का प्रतिपादन करता है। यह विश्वभर में अनुमानित 97% ब्राउज़रों द्वारा समर्थित है ।

अन्य डेस्कटॉप ब्राउज़रों ने लगभग उसी समय WOFF का समर्थन करना शुरू कर दिया, जिसमें फ़ायरफ़ॉक्स 3.6 के बाद फ़ायरफ़ॉक्स, क्रोम 5 से क्रोम, और 5.1 के बाद से सफारी (क्रमशः 2010, 2011 और 2011 में जारी) को शामिल किया गया, जो पहले संस्करणों में अप्रचलित टीटीएफ और ओटीएफ 1 प्रारूपों को प्रस्तुत करता है। । अधिकांश मोबाइल ब्राउज़र ने 2013 से WOFF का समर्थन किया है।

कैविएट और निष्कर्ष

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

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

यदि आप तय करते हैं कि ऐसा ही है, और आपको 2011 से अधिक पुराने डेस्कटॉप ब्राउज़रों का समर्थन करने की आवश्यकता है, या 2013 से अधिक पुराने मोबाइल ब्राउज़र, पूर्ण फ़ॉन्ट स्टैक का उपयोग करें: WOFF2, WOFF, TTF (या OTF), और EOT।

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


(1) टीटीएफ और ओटीएफ पारंपरिक डेस्कटॉप फ़ॉन्ट प्रारूप हैं, और कोई भी ब्राउज़र जो एक का समर्थन करता है दूसरे का समर्थन करता है, इसलिए कभी भी दोनों का उपयोग न करें


संबंधित: कमांड लाइन (और इसलिए एक समय में एक के बजाय बल्क में) का उपयोग करके टीटीएफ / ओटीएफ फ़ॉन्ट फ़ाइलों को WOFF और WOFF2 प्रारूपों में कैसे परिवर्तित किया जाए
हाशिम

1

बहुत ज्यादा नहीं।

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

बस WOFF का उपयोग करें और इसके साथ किया जाए। यदि आप अंतिम बाइट को निचोड़ना चाहते हैं, तो आप WOFF2 की पेशकश करना चाहते हैं, लेकिन अंतर नगण्य होगा।


0

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

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

हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.