हमें फ़ॉन्ट-फेस में ttf, eot, woff, svg, ... क्यों शामिल करना चाहिए


299

में CSS3 font-face , एक से अधिक फ़ॉन्ट प्रकार की तरह शामिल हैं ttf, eot, woff, svgऔर cff

हमें इन सभी प्रकारों का उपयोग क्यों करना चाहिए?

यदि वे विभिन्न ब्राउज़रों के लिए विशेष हैं, तो उनकी संख्या प्रमुख वेब ब्राउज़रों की संख्या से अधिक क्यों है?

जवाबों:


425

2019 में उत्तर:

केवल WOFF2 का उपयोग करें, या यदि आपको विरासत समर्थन की आवश्यकता है, तो WOFF। किसी अन्य प्रारूप का उपयोग न करें

( svgऔर eotमृत प्रारूप हैं, ttfऔर otfपूर्ण सिस्टम फोंट हैं, और इसका उपयोग वेब उद्देश्यों के लिए नहीं किया जाना चाहिए)

2012 से मूल उत्तर:

संक्षेप में, फ़ॉन्ट-चेहरा बहुत पुराना है, लेकिन केवल हाल ही में IE से अधिक का समर्थन किया गया है।

  • eot इंटरनेट खोजकर्ताओं के लिए आवश्यक है जो IE9 से पुराने हैं - उन्होंने कल्पना का आविष्कार किया, लेकिन ईओटी एक मालिकाना समाधान था।

  • ttfऔर otfसामान्य पुराने फोंट हैं, इसलिए कुछ लोगों को गुस्सा आया कि इसका मतलब है कि कोई भी मुफ्त में महंगे-से-लाइसेंस फोंट डाउनलोड कर सकता है।

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

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

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

यदि आप IE 8 और लोअर, और iOS 4 और लोअर, और एंड्रॉइड 4.3 या उससे पहले का समर्थन नहीं करना चाहते हैं, तो आप इसका समर्थन करने वाले नए ब्राउज़रों के लिए बस WOFF (और WOFF2, एक अधिक उच्च संकुचित WOFF) का उपयोग कर सकते हैं।)

@font-face {
  font-family: 'MyWebFont';
  src:  url('myfont.woff2') format('woff2'),
        url('myfont.woff') format('woff');
}

के लिए समर्थन woffपर जाँच की जा सकती http://caniuse.com/woff
के लिए समर्थन woff2पर जाँच की जा सकती http://caniuse.com/woff2


8
iOS 5 WOFF को सपोर्ट करता है।
रॉब

70
woff... एक मोड है जो लोगों को फ़ॉन्ट को रोकना बंद कर देता है ? पृथ्वी पर कैसे काम कर सकता है / करता है?
मार्क एमी

12
TTF WOFF से हल्का नहीं होना चाहिए। WOFF ट्रू टाइप - ओपन टाइप फ़ॉन्ट (ttf और otf) का एक संकुचित रूप है।
टोटो_टिको

7
WOFF की बात चोरी विरोधी नहीं है। टाइपकिट का कहना है, "ट्रू टाइप फ़ॉन्ट पर दो मुख्य लाभ ओपन टाइप / सीएफएफ फोंट हैं 1) उनकी छोटी फ़ाइल का आकार, और 2) उन्हें वातावरण को अच्छी तरह से प्रस्तुत करने के लिए बहुत कम जानकारी की आवश्यकता होती है जो कि एंटी-अलियासिंग के कुछ प्रकार की अनुमति देती है। "
माइकल मैकगिनिस

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

21

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

[मृत URL हटा] पर एक नज़र डालें। आपके द्वारा देखा जाने वाला फ़ॉन्ट एक प्रायोगिक वेब दिया गया स्मार्टफ़ॉन्ट (woff) है जिसमें जटिल आकार बनाने वाले हजारों संयुक्त वर्ण हैं। अंतर्निहित पाठ रोमानी सिंघाला का सरल लैटिन कोड है। (नोटपैड पर कॉपी और पेस्ट करें और देखें)।

केवल woff ही ऐसा कर सकता है क्योंकि किसी के पास यह फ़ॉन्ट नहीं है और फिर भी इसे कहीं भी देखा जाता है (मैक, विन, लिनक्स और यहां तक ​​कि IE के अलावा सभी ब्राउज़रों के स्मार्टफ़ोन पर। IE के पास ओपन टाइप्स के लिए पूर्ण समर्थन नहीं है)।


3
मुझे उस वेबसाइट पर कुछ विशेष दिखाई नहीं दे रहा है। यदि मैं इसे एक संपादक में कॉपी करता हूं (मुझे utf8 समर्थन है) तो मैं अभी भी केवल सामान्य पाठ देखता हूं। यह क्या है कि woff वास्तव में करता है?
ज़ेल्फिर कलस्टहल

4
इस उत्तर के दो-तिहाई गलत या अप्रासंगिक हैं। साथ ही वह लिंक टूटा हुआ है।
14:29 बजे Y29295

12

WOFF 2.0, Brotli संपीड़न एल्गोरिथ्म पर आधारित और WOFF 1.0 पर अन्य सुधार, फ़ाइल आकार में 30% से अधिक की कमी देने पर क्रोम, ओपेरा और फ़ायरफ़ॉक्स में समर्थित है।

http://en.wikipedia.org/wiki/Web_Open_Font_Format http://en.wikipedia.org/wiki/Brotli

http://sth.name/2014/09/03/Speed-up-webfonts/ इसका उपयोग कैसे करें पर एक उदाहरण है।

मूल रूप से आप woff2 फ़ाइल में src url जोड़ते हैं और woff2 प्रारूप निर्दिष्ट करते हैं। यह woff-format से पहले होना ज़रूरी है: ब्राउज़र पहले प्रारूप का उपयोग करेगा जिसका वह समर्थन करता है।

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