माइक्रोसॉफ्ट एज

Question

में @ फ़ॉन्ट-चेहरे का उपयोग करके मैं यहां एक अजीब समस्या से निपट रहा हूं .. ऐसा लगता है कि जब मैं @ फ़ॉन्ट-फेस का उपयोग करता हूं तो माइक्रोसॉफ्ट एज ब्राउज़र फोंट लोड नहीं करता है। मैंने अपने सभी कंप्यूटरों की जांच की जो विंडोज 10 & माइक्रोसॉफ्ट एज चलाते हैं।

मैं http://caniuse.com/#search=font%20face

जाँच इसमें कहा गया है कि फॉन्ट-फेस इसलिए मैं नहीं जानता कि क्या हो रहा है एज के साथ संगत है। मेरे उदाहरण में मेरे पास सिर्फ एक div और इसका फ़ॉन्ट पैरामीटर है।

सीएसएस

@font-face{font-family:'Dosis';font-style:normal;font-weight:200;src:local('Dosis ExtraLight'), local('Dosis-ExtraLight'), url(http://fonts.gstatic.com/s/dosis/v4/RPKDmaFi75RJkvjWaDDb0vesZW2xOQ-xsNqO47m55DA.woff2) format('woff2');} 
@font-face{font-family:'Dosis';font-style:normal;font-weight:700;src:local('Dosis Bold'), local('Dosis-Bold'), url(http://fonts.gstatic.com/s/dosis/v4/22aDRG5X9l7obljtz7tihvesZW2xOQ-xsNqO47m55DA.woff2) format('woff2');} 

एचटीएमएल

div { 
    font-family:'Dosis'; 
} 

लाइव संस्करण

http://codepen.io/mariomez/pen/YwGGWy

Answer 1

प्रक्रिया:

प्रक्रिया मैं आदेश सभी आवश्यक प्रारूपों स्थापित करने के लिए में पीछा जो font-weight मैं प्रत्येक फ़ॉन्ट से की जरूरत है और फिर जाने के लिए और गूगल फ़ॉन्ट्स से डाउनलोड कर लगाने के लिए किया गया था। फिर https://everythingfonts.com/font-face (फ़ॉन्ट फेस जनरेटर) का उपयोग करके मैंने सीएसएस कोड के साथ सभी प्रारूपों को डाउनलोड किया। तब मैंने उन्हें अपने सीएसएस और एचटीएमएल में शामिल किया।

सीएसएस:

@font-face { 
    font-family: 'JosefinSansLight'; 
    src: url('/fonts/JosefinSansLight.eot'); 
    src: url('/fonts/JosefinSansLight.eot') format('embedded-opentype'), 
     url('/fonts/JosefinSansLight.woff2') format('woff2'), 
     url('/fonts/JosefinSansLight.woff') format('woff'), 
     url('/fonts/JosefinSansLight.ttf') format('truetype'); 
} 

एचटीएमएल (अंश):

.testim{ 
font-family:'JosefinSansLight', sans-serif; 
line-height:normal; 
color:#969696; 
font-size:1.2em; 
} 

फ़ाइलें: (मेरे डोमेन फ़ोल्डर)/फोंट

fonts/JosefinSansLight.eot 
fonts/JosefinSansLight.eot 
fonts/JosefinSansLight.woff2 
fonts/JosefinSansLight.woff 
fonts/JosefinSansLight.ttf 

Answer 2

आप केवल WOFF2 प्रारूप का उपयोग कर रहे हैं जिसका माइक्रोसॉफ्ट एज पर कोई समर्थन नहीं है।

WOFF2 Compatibility

समस्या को हल करने के लिए अपने @font-face घोषणा में WOFF प्रारूप शामिल हैं। अधिकांश आधुनिक ब्राउज़र supportsWOFF

अधिकतम ब्राउज़र समर्थन के लिए सभी संभावित प्रारूप शामिल हैं।

@font-face { 
    font-family: 'MyWebFont'; 
    src: url('webfont.eot'); 
    src: url('webfont.eot?#iefix') format('embedded-opentype'), 
     url('webfont.woff2') format('woff2'), 
     url('webfont.woff') format('woff'), 
     url('webfont.ttf') format('truetype'), 
     url('webfont.svg#svgFontName') format('svg'); 
} 

Answer 3

चीजें हा माइक्रोसॉफ्ट एज के लिए .woff फोंट के बारे में बदल दिया है। मैंने हाल ही में एक विंडोज 10 लैपटॉप खरीदा है। @ फ़ॉन्ट-फेस में .woff फोंट वाली वेबसाइटें उन्हें माइक्रोसॉफ्ट एज में प्रदर्शित नहीं करतीं लेकिन उन्हें इंटरनेट एक्सप्लोरर में प्रदर्शित करती थीं। 5/11/2016 के अनुसार Microsoft developer website कहता है कि निम्नानुसार एज में .woff2 समर्थित है।

माइक्रोसॉफ्ट एज वेब ओपन फ़ॉन्ट प्रारूप (डब्ल्यूओएफएफ) फ़ाइल प्रारूप 2.0 विनिर्देश का समर्थन करता है जो डब्ल्यूओएफएफ 1.0 से एक बेहतर संपीड़न एल्गोरिदम प्रदान करता है। फ़ॉन्ट प्रारूप "woff2" समर्थित है।

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

@font-face { 
    font-family: Eurostile; 
    src: url("http://mylink/eurostile.woff"), url("http://mylink/eurostile.woff2"), url("http://mylink/eurostile.eot"), url("http://mylink/eurostile.ttf") format('truetype'); 
} 

Answer 4

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

आशा है कि यह मदद करता है किसी और :)