अगर मेरे पास केवल WOFF और EOT है, तो मैं किस ब्राउज़र को @ फॉन्ट-फेस के साथ सपोर्ट कर रहा हूँ?


16

हम एक फॉन्ट खरीदने पर विचार कर रहे हैं, जो केवल उपलब्ध स्वरूपों में वेब पर इसके उपयोग की अनुमति देता है: WOFF और EOT।

मुझे यकीन नहीं है कि वे कौन से ब्राउज़र काम करते हैं और तारीख की जानकारी तक नहीं पा सकते हैं। मैं उन दो के साथ कौन से ब्राउज़रों को सुपरपोर्ट कर सकता हूं?

मेरा एकमात्र अनुभव फोंटप्रिंटिंग सिंटैक्स के साथ है जिसमें EOT, WOFF, TTF और SVG है।


जवाबों:


23

यह @ फॉन्ट-फेस , हैकी फिक्स और सभी के साथ लोड करने का मानक तरीका है !!

@font-face {
    font-family: 'BebasNeueRegular';
    src: url('BebasNeue-webfont.eot');
    src: url('BebasNeue-webfont.eot?#iefix') format('embedded-opentype'),
         url('BebasNeue-webfont.woff') format('woff'),
         url('BebasNeue-webfont.ttf') format('truetype'),
         url('BebasNeue-webfont.svg#BebasNeueRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

लेकिन एसवीजी को हटा दें और आप iOS <5.0 के लिए लगभग पूरी तरह से समर्थन खो देंगे

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

द्वारा संपादित wyu : तो आप समर्थन देख सकते हैं मैं एक मेज संकलित किया है कंधे से कंधा मिलाकर

@ फ़ॉन्ट-चेहरा ब्राउज़र समर्थन आम तौर पर

@ फ़ॉन्ट-चेहरा ब्राउज़र समर्थन आम तौर पर

ईओटी ब्राउज़र समर्थन

ईओटी ब्राउज़र समर्थन

WOFF ब्राउज़र समर्थन

WOFF ब्राउज़र समर्थन

एसवीजी ब्राउज़र समर्थन

एसवीजी ब्राउज़र समर्थन

TTF ब्राउज़र समर्थन

TTF ब्राउज़र समर्थन


3
eot को दो अलग-अलग तरीकों से क्यों घोषित किया जाता है - .ot और .eot? #iefix?
सैम


2
भविष्य में इस उत्तर की जाँच करने वाले किसी भी व्यक्ति के लिए ... Android> = 4.4 अब WOFF caniuse.com/#feat=woff
ozke

3
प्रिय @ozke, मैं भविष्य से हूं, इस उपयोगी तथ्य को साझा करने के लिए धन्यवाद। आपको यह जानने में भी रुचि हो सकती है कि, 2015 के अंत तक, एंड्रॉइड स्टॉक ब्राउज़र के संस्करणों का उपयोग जो समर्थन नहीं करते हैं woff, वैश्विक उपयोगकर्ताओं के 2% से कम हो जाएंगे, और स्टॉक एंड्रॉइड ब्राउज़र को क्रोम द्वारा ग्रहण किया जाएगा। Android (16%) और UC (8%), जो दोनों का समर्थन करते हैं woff। Android के लिए फ़ायरफ़ॉक्स, भी; हालाँकि, इसका उपयोग कभी भी 1% से अधिक नहीं होगा। अब आप मेघन ट्रेनर द्वारा "ऑल अबाउट दैट बास" को सुनना शुरू कर सकते हैं, जिसे मैं अक्टूबर 2014 में प्रथागत
मानता हूं

तो अब आपको केवल वेब फोंट चाहिए?
SuperUberDuper

1

SVG आपको @ फॉन्ट-फेस के साथ कहीं भी नहीं मिलेगा; लेकिन, EOT IE द्वारा समर्थित है; जहां तक, TTF और OTF अन्य सभी प्रमुख ब्राउज़रों द्वारा समर्थित हैं। WOFF के लिए, कुछ पढ़ने से, TTF और OTF के समान होने के साथ, यह बहुत संभव है कि यह TTF या OTF जैसे ही ब्राउज़रों में समर्थित हो। मेरा सुझाव, यदि आप वास्तव में रुचि रखते हैं, तो एक ब्राउज़र में प्रत्येक @ फ़ॉन्ट-फेस एक्सटेंशन को आज़माएं और देखें कि आपको क्या मिलता है, और फिर सबमिट करें कि आपके पास W3C को उनके फॉन्ट-फेस डिस्क्रिप्टर के लिए उनके मानक पृष्ठ को अपडेट करने के लिए क्या मिला। (इसमें वर्तमान में "सुरक्षित" फ़ॉन्ट एक्सटेंशन शामिल नहीं हैं)।

यदि अन्य सभी विफल रहता है तो मुझे पूरा यकीन है कि W3Schools अद्यतित है: http://www.w3schools.com/cssref/css3_pr_font-face_rule.asp


समस्या यह है कि सफारी मोबाइल 4.1 और नीचे केवल एसवीजी का समर्थन करता है।
toomanyairmiles

@toomanyairmiles इसीलिए अंत में, यह आपके "डिफ़ॉल्ट" के लिए अच्छा दिखता है और फिर इसे उन लोगों के लिए अद्भुत बनाता है जो इसे "देख" सकते हैं। अधिकांश फोंट का OTF, EOT और स्वयं का SVG नहीं होने से 100% कवरेज नहीं हो सकता।
जेफ लैंगमेयर

वास्तव में आप कर सकते हैं। मैंने कई साइटें बनाई हैं, जिनमें उन सभी फॉन्टों को खरीदने, या फ्री फोंट का इस्तेमाल करने और खुद फाइल तैयार करने के लिए 100% कवरेज है - पूरी तरह से काम करता है।
toomanyairmiles

@toomanyairmiles यह वह जगह है जहां तेज और ढीली टाइपिंग मुझे मार देती है, जरूरत नहीं है कि हमेशा 100% कवरेज हो, कभी-कभी ऐसा नहीं होता है और डिजाइनर को याद रखना होगा कि सबसे खराब स्थिति में लोग पुराने ब्राउज़रों का उपयोग कर रहे हैं और जैसे, 100 % कवरेज का मतलब हमेशा 100% कवरेज नहीं होता है; जहाँ मैं लगभग ४०-५०% इंटरनेट उपयोगकर्ताओं को अभी भी IE 40 या पुराने का उपयोग कर रहा हूँ, जो पहली बार में फॉन्ट-फेस को बहुत अच्छी तरह से सपोर्ट नहीं करते हैं, सच्ची १००% कवरेज के लिए नीचे की लाइन होना आवश्यक है "सभ्य" दिखता है या कम से कम आपकी साइट को "कट्टर" फोंट की बाधाओं के भीतर रखता है।
जेफ लैंगमेयर

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

1

Webfont विक्रेताओं को वास्तव में अपने फोंट के लिए बल्ले से बहुत सहायता प्रदान करने की आवश्यकता है - विशेष रूप से इस वजह से! आपको लगता है कि यह दूसरी प्रकृति होगी, यहां तक ​​कि क्लाउड आधारित (शामिल करने या बाहर करने के विकल्प के साथ) - यदि लोगों को ब्लैक लिस्टेड फोंट का शिकार करने के लिए मजबूर किया जाता है, तो क्या फोंट पाए जाने के बाद ही पाइरेसी को बढ़ावा नहीं मिलेगा? @ eb_p1


1
रुको, क्यों? जब यह प्रश्न पहली बार पूछा गया था, तब ईओटी मृत था, जब आप उत्तर देते थे, तो यह एक सड़ती हुई लाश थी और आज मैंने एक साल में ईओटी फ़ॉन्ट नहीं देखा है।
सिल्वरबैकनेट
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.