@ फ़ॉन्ट-फेस मोबाइल वेबकिट

Question

में काम नहीं कर रहा है मुझे किसी भी मोबाइल वेबकिट ब्राउज़र में व्यवहार करने के लिए @font-face प्राप्त करने में परेशानी हो रही है - एक आईफोन 3 जीएस पर सफारी, एंड्रॉइड पर डिफ़ॉल्ट एंड्रॉइड 2.2 ब्राउज़र और डॉल्फिन ब्राउज़र।

यह आईई 7 से आईई 9, एफएफ 3.5, सफारी 4, और ओपेरा से सभी डेस्कटॉप ब्राउज़रों में काम करता है।

फोंट और सीएसएस FontSquirrel से कर रहे हैं:

@font-face { 
    font-family: 'LeagueGothicRegular'; 
    src: url('../fonts/League_Gothic-webfont.eot'); 
    src: local('☺'), 
     url('../fonts/League_Gothic-webfont.woff') format('woff'), 
     url('../fonts/League_Gothic-webfont.ttf') format('truetype'), 
     url('../fonts/League_Gothic-webfont.svg#webfontFHzvtkso') format('svg'); 
    font-weight: normal; 
    font-style: normal; 
} 

@font-face { 
    font-family: 'LatinModernRoman10Bold'; 
    src: url('../fonts/lmroman10-bold-webfont.eot'); 
    src: local('☺'), 
     url('../fonts/lmroman10-bold-webfont.woff') format('woff'), 
     url('../fonts/lmroman10-bold-webfont.ttf') format('truetype'), 
     url('../fonts/lmroman10-bold-webfont.svg#webfonthCDr6KZk') format('svg'); 
    font-weight: normal; 
    font-style: normal; 
} 

@font-face { 
    font-family: 'LatinModernRoman10BoldItalic'; 
    src: url('../fonts/lmroman10-bolditalic-webfont.eot'); 
    src: local('☺'), 
     url('../fonts/lmroman10-bolditalic-webfont.woff') format('woff'), 
     url('../fonts/lmroman10-bolditalic-webfont.ttf') format('truetype'), 
     url('../fonts/lmroman10-bolditalic-webfont.svg#webfontegrLi3sm') format('svg'); 
    font-weight: normal; 
    font-style: normal; 
} 

मैं एसवीजी फ़ॉन्ट स्रोत में एसवीजी आईडी देख लिया है, और वे सभी मैच।

ऐसा इसलिए हो सकता है क्योंकि मुझे बाद में सीएसएस में कुछ अक्षर-रिक्ति नियम मिल गए हैं?

धन्यवाद!

Answer 1

जैसा कि यह पता चला है, वाक्यविन्यास गलत था। मैं ट्विटर के माध्यम से इस समाधान भर में ठोकर खाई:

http://www.fontspring.com/blog/the-new-bulletproof-font-face-syntax

यह पूरी तरह से काम किया। बस सभी प्रमुख ब्राउज़रों में चेक किया गया, और मेरे फ़ॉन्ट्स एंड्रॉइड और आईओएस सहित दिखाए गए।

अब, मेरी सीएसएस इसलिए की तरह पढ़ता है:

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

@font-face { 
    font-family: 'LatinModernRoman10Bold'; 
    src: url('../fonts/lmroman10-bold-webfont.eot#') format('eot'), 
     url('../fonts/lmroman10-bold-webfont.woff') format('woff'), 
     url('../fonts/lmroman10-bold-webfont.ttf') format('truetype'), 
     url('../fonts/lmroman10-bold-webfont.svg#webfonthCDr6KZk') format('svg'); 
    font-weight: normal; 
    font-style: normal; 
} 

@font-face { 
    font-family: 'LatinModernRoman10BoldItalic'; 
    src: url('../fonts/lmroman10-bolditalic-webfont.eot#') format('eot'), 
     url('../fonts/lmroman10-bolditalic-webfont.woff') format('woff'), 
     url('../fonts/lmroman10-bolditalic-webfont.ttf') format('truetype'), 
     url('../fonts/lmroman10-bolditalic-webfont.svg#webfontegrLi3sm') format('svg'); 
    font-weight: normal; 
    font-style: normal; 
} 

पता करने के लिए खुशी है कि वहाँ डांग smileyface हैक की तुलना में वहाँ एक बेहतर बुलेटप्रूफ समाधान है।

उम्मीद है कि यह किसी की मदद करेगा!

Answer 2

http://caniuse.com/woff के अनुसार, एंड्रॉइड 2.3, 4, 4.1, 4.2 और 4.3 वेफ फ़ॉन्ट्स का समर्थन नहीं करते हैं। तो आपको भी टीटीएफ जोड़ना होगा। मैं एंड्रॉइड 4.1 और 4.2 पर परीक्षण कर रहा हूं और woff ठीक लग रहा था! लेकिन 4.0.3 पर, मुझे टीएफ फोंट जोड़ना पड़ा।

Google से ttf फ़ॉन्ट डाउनलोड करने के तरीके को देखने के लिए यह लिंक http://sanchez.org.ph/use-host-and-download-google-fonts-on-your-own-website/ देखें।