2012-06-12 13 views
227

में क्यों शामिल होना चाहिए CSS3font-face में, वहाँ एकाधिक फ़ॉन्ट प्रकार शामिल कर लिए जाते ttf, eot, woff, svg और cff की तरह।हम ttf, EOT, WOFF, svg, ... एक फॉन्ट-फेस

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

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

उत्तर

308

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

  • eot इंटरनेट खोजकर्ता के लिए आवश्यक है कि IE9 से अधिक पुराने हैं - वे कल्पना का आविष्कार किया है, लेकिन EOT एक भयानक प्रारूप फ़ॉन्ट सुविधाओं के बहुत बाहर स्ट्रिप्स है।

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

  • लगभग उसी समय, आईफोन और आईपैड पर आईओएस svg फोंट लागू किया गया।

  • फिर, woff का आविष्कार किया गया था जिसमें एक ऐसा तरीका है जो लोगों को फ़ॉन्ट को पायरेट करने से रोकता है। यह पसंदीदा प्रारूप है।

आप 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

आईओएस 5 डब्ल्यूओएफएफ का समर्थन करता है। – Rob

+48

* 'woff' ... एक ऐसा तरीका है जो लोगों को फ़ॉन्ट * को पायरेट करने से रोकता है? धरती पर कैसे काम कर सकता है? –

+0

शायद मैं गलत हूं - मुझे यकीन है कि मुझे एक झंडा याद है जो 'डेस्कटॉप मोड' जैसा कुछ अक्षम करता है ताकि यह सुनिश्चित किया जा सके कि कोई उपयोगकर्ता फ़ॉन्ट-फेस के बाहर फ़ॉन्ट का उपयोग नहीं कर सके ... शायद यह एक पूर्व कल्पना थी? –

22

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

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

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

+3

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

+4

इस उत्तर का दो तिहाई या तो गलत या अप्रासंगिक है। यह भी लिंक टूटा हुआ है। – Yay295

7

डब्लूओएफएफ 2.0, ब्रोटली संपीड़न एल्गोरिदम और 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 से पहले यह होना महत्वपूर्ण है: ब्राउज़र पहले प्रारूप का उपयोग करेगा जो इसका समर्थन करता है।

संबंधित मुद्दे