2011-02-26 12 views
10

इस लेख के अनुसार, http://www.standardista.com/css3/font-face-browser-support आईई @font-face का समर्थन करता है, लेकिन मैं किसी भी साइट है जो मान्य कस्टम फ़ॉन्ट चेहरा है पर जल्दी (IE6) से भी आईईआईई ब्राउज़र (आईई 6, 7, 8) @ फ़ॉन्ट-फेस का समर्थन करते हैं?

के लिए काम

, अगर आईई कस्टम फ़ॉन्ट का समर्थन करता है @font-face के माध्यम से नहीं मिल सकता है, तो क्यों उदाहरण के लिए लोग अभी भी cufon का उपयोग कर रहे हैं?

कोई स्पष्टीकरण या उदाहरण?

+0

["HTML और XML दस्तावेज़ों में समर्थन" संगतता तालिका] (http://en.wikipedia.org/wiki/Comparison_of_layout_engines_ (Web_Typography) देखें)। –

+0

संबंधित http://webmasters.stackexchange.com/questions/26992/if-i-have-only-woff-and-eot-what-browsers-am-i-supporting-with-font-face –

उत्तर

13

इंटरनेट एक्सप्लोरर का पुराना संस्करण Embedded OpenType (EOT) फ़ाइलों का समर्थन करता है @font-face को CSS3 में औपचारिक रूप से लागू किया गया था। आप FontSquirrel या Google's Font API जैसी साइटों पर संगत फाइलें पा सकते हैं। FontSquirrel के रूपांतरण उपकरण को यहां भी मदद करनी चाहिए। एकाधिक ब्राउज़रों के लिए एकाधिक फ़ाइलों को एम्बेड करने के लिए the latest bulletproof syntax recommended by fontspring पढ़ने के लायक भी होगा।


तथ्य यह है कि यह हाल ही में दो गुना होने तक अक्सर उपयोग नहीं किया जाता था; पहले @font-face फ़ॉन्ट्स का उपयोग करने के साथ कानूनी समस्याएं हैं - कॉपीराइट विशिष्ट होने के लिए। Cufon के विपरीत जो केवल @font-face के साथ फोंट के आकार को बरकरार रखता है, आप वास्तविक फ़ॉन्ट्स को स्वयं प्रेषित कर रहे हैं, जिनके कानूनी प्रभाव हैं।

अन्य समस्या अन्य ब्राउज़रों में सहायता है - फ़ायरफ़ॉक्स 3 आधुनिक ब्राउज़र में से एक था, ताकि @font-face का समर्थन न किया जा सके, इसलिए 200 9 के मध्य में फ़ायरफ़ॉक्स 3.5 की रिलीज से पहले @font-face अभी भी व्यवहार्य नहीं था। ब्राउज़र के बीच प्रारूप समर्थन में भिन्नता के अलावा, इसलिए प्रौद्योगिकी का विकास धीमा है।

+0

मुझे लगता है कि उपयोग करना वेब डेवलपर्स के लिए ओट एक बड़ा मुद्दा नहीं होगा? तो लोग अभी भी cufon का उपयोग क्यों कर रहे हैं क्योंकि यह @ फ़ॉन्ट-फेस की तुलना में धीमा है और आप वेबपृष्ठ पर कॉपी/पेस्ट करने में सक्षम नहीं होंगे। धन्यवाद फिर से –

+0

सभी फ़ॉन्ट लाइसेंस @ फ़ॉन्ट-फेस का उपयोग करके ऑनलाइन एम्बेडिंग की अनुमति नहीं देते हैं, लेकिन Cufon को अनुमति दें। यह केवल समय की बात होगी क्योंकि अधिक से अधिक लोग @ फ़ॉन्ट-फेस में स्थानांतरित हो जाएंगे, अब फ़ॉन्ट को विशेष वेब लाइसेंस के साथ बेचा जा रहा है जिसमें ईओटी और डब्ल्यूओएफ शामिल है (आईई 9, एफएफ, क्रोम, वेबकिट द्वारा समर्थित - अभी तक नहीं सफारी में, लेकिन यह आ रहा है .. ओएस एक्स 10.7 पूर्वावलोकन में पहले से ही काम करता है) – CharlesLeaf

+2

आईई के पुराने संस्करण @ फ़ॉन्ट-चेहरे का समर्थन करने का कारण यह है क्योंकि यह मूल रूप से सीएसएस 2.0 विनिर्देश में था लेकिन सीएसएस 2.1 से हटा दिया गया था। ब्याज की एक बिंदु के रूप में। –

5

इंटरनेट एक्सप्लोरर 9 को एक ईओटी प्रकार फ़ॉन्ट की आवश्यकता है। टीटीएफ फोंट का इस्तेमाल अन्य हालिया ब्राउज़र संस्करणों और आईवी और आईपैड जैसे उपकरणों के लिए एसवीजी में किया जा सकता है। आप @ font-face के लिए ब्राउज़र समर्थन के बारे में और अधिक पढ़ें http://www.w3schools.com/cssref/css3_pr_font-face_rule.asp

फ़ॉन्ट गिलहरी भी आपकी मौजूदा फ़ॉन्ट फ़ाइलों से ईओटी समेत वेब फ़ॉन्ट फ़ाइलों को बनाने के लिए एक महान संसाधन है। कृपया सुनिश्चित करें कि आपके पास वेब पर फ़ॉन्ट का उपयोग करने का लाइसेंस है। आप नि: शुल्क वेब फ़ॉन्ट फ़ाइल जनरेटर यहाँ पहुँच सकते हैं: http://www.fontsquirrel.com/fontface/generator

एक @ फॉन्ट-फेस सेट के लिए एक विशिष्ट सीएसएस प्रविष्टि इस प्रकार है:

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

तो फिर तुम "फ़ॉन्ट बताए द्वारा अपने फ़ॉन्ट कॉल कर सकते हैं -family "का उपयोग विशेषता सीएसएस

.my-class { font-family: "custom-font" } 
1

तुम भी लिख सकते हैं:

@font-face { 
    font-family: 'custom-font'; 
    src: url('/some/directory/custom-font.eot'); 
} 
@font-face { 
    font-weight: normal; 
    font-style: normal; 
    font-family: 'custom-font'; 
    src: url('/some/directory/custom-font.woff') format('woff'), 
     url('/some/directory/custom-font.ttf') format('truetype'), 
     url('/some/directory/custom-font.svg#webfont') format('svg'); 
} 

उपरोक्त उदाहरण के साथ-साथ "?" के बिना काम करता है निशान।

1

हां वे आईई 6 * से शुरू करते हैं। एक काम कर रहे example

फ़ॉन्ट को कुछ विशेष नियमों का पालन करना चाहिए, उदाहरण के लिए फ़ॉन्ट नाम परिवार के नाम से शुरू होना चाहिए और सीएसएस में पारिवारिक नाम फ़ॉन्ट के पारिवारिक नाम से मेल खाना चाहिए।

यदि आप एक .ttf से .eot उत्पन्न करने के लिए फ़ॉन्ट गिलहरी webfont generator का उपयोग करते हैं, तो यह सुनिश्चित होगा कि जेनरेट आईई 6 पर प्रयोग योग्य है।

* सावधान रहें कि aliasing issues आईई 6/7/8 में कस्टम फोंट प्रतिपादन के साथ हैं।