ओपेरा और वेबकिट

Question

में कस्टम फ़ॉन्ट काट दिया गया है। मैं एक पृष्ठ में एक कस्टम फ़ॉन्ट का उपयोग कर रहा हूं जो मैं विकसित कर रहा हूं, Droid Sans, और कुछ फ़ॉन्ट आकारों पर, नीचे काट दिया गया है, लेकिन केवल ओपेरा और वेबकिट ब्राउज़र में ।

यह Google की अपनी वेबफ़ॉन्ट पृष्ठ पर पुन: पेश करने Droid संस की तलाश में और 18px में पूरे वर्णमाला दिखा आसान है: http://www.google.com/webfonts

यह लोअर केस g के लिए विशेष रूप से स्पष्ट है।

क्या कुछ सीएसएस चाल/हैक मैं लाइन ऊंचाई बढ़ाने/पूरे चरित्र को दिखाने के लिए उपयोग कर सकता हूं या क्या मैं वास्तव में फ़ॉन्ट के केवल कुछ आकार तक ही सीमित हूं?

line-height और उदाहरण के लिए padding कुछ भी बदल नहीं है और 20px font-size ठीक काम करता है और इस समय मैं विंडोज 7 का उपयोग कर रहा

संपादित करें: वैसे, मैं यहाँ लेकिन के रूप में एक similar question के बारे में पता कर रहा हूँ स्वीकार्य उत्तर फ़ॉन्ट आकार बदल रहा है और शेष उत्तरों लागू नहीं होते हैं, यह मेरे लिए अधिक उपयोग नहीं है।

संपादित करें 2:An example कि कम से कम अब के लिए समस्या से पता चलता (, बाईं ओर के स्तंभ स्लाइड शो के तहत, Il Cerca Viaggi)।

संपादित करें 3: समस्या विंडोज तक ही सीमित है हालांकि मुझे यकीन नहीं है कि कौन से संस्करण हैं।

संपादित करें 4: मैंने Google वेबफोंट से एक स्क्रीनशॉट जोड़ा है यह दिखाने के लिए कि समस्या उस साइट के लिए विशिष्ट नहीं है जो मैं विकसित कर रहा हूं।

Answer 1

मुझे यकीन है कि नहीं हूँ, लेकिन काम करने के लिए

display:block; 
padding-bottom:20px; 
margin-bottom:10px; 
line-height:normal !important; 
line-height:55%; 

सामान्य करने के लिए लाइन ऊंचाई सेट गद्दी के लिए इस जोड़ने का प्रयास करते हैं, यह एक फ़ायरफ़ॉक्स बग है और% मैं में लाइन ऊंचाई का उपयोग लगता है कि यह चाल

Answer 2

similar question पर, एक उत्तर ने सुझाव दिया कि, जबकि यह विशेष रूप से एक विंडोज फ़ॉन्ट प्रतिपादन समस्या प्रतीत होता है, एक ट्रू टाइप फ़ॉन्ट (टीटीएफ) कंटेनर के svg, eot और otf संस्करणों को होस्ट करना जी फ़ॉन्ट, जो वेब के लिए ऑप्टिमाइज़ नहीं किया गया था, ने अपने प्रदाता के लिए समस्या तय की थी। यदि संभव हो, तो DroidSans फ़ॉन्ट का एक साफ, अन-अनुकूलित संस्करण प्राप्त करें और वेब फोंट को स्वयं निर्यात करें।

संपादित करें: क्षमा करें, मैं छुट्टी के लिए बाहर था और एसओ तक पहुंच नहीं थी। चूंकि मैं वापस आ गया हूं, मैंने विंडोज मशीनों पर इस समस्या का कारण बनने में थोड़ा सा शोध किया है ...

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

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

वैकल्पिक रूप से

, हालांकि मैं अब वास्तव में है कि विश्वास है कि यह मदद मिलेगी हूँ, आप FontSquirrel पर DroidSans के टीटीएफ डाउनलोड करने और Typograf की तरह एक सॉफ्टवेयर पैकेज का उपयोग वेब फोंट (ईओटी, WOFF, एसवीजी) निर्यात करने के लिए कर सकते हैं। हालांकि, पहले ऊपर उल्लिखित अनुसार अपने सीएसएस में स्रोतों को पुन: व्यवस्थित करने का प्रयास करें।

एक और संपादित: भविष्य में भ्रम से बचने के लिए टीटीएफ के बजाय टीआईएफएफ का मेरा गलत उपयोग किया गया है।

अपने मूल शैली पत्र मेरे पास में: मिश्रण-अप, लोगों के लिए क्षमा याचना ...

Answer 3

हालांकि यह समाधान मैं देख रहा हूँ नहीं है, मैं एक संभव समाधान है कि दूसरों के लिए काम कर सकते हैं पाया है

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

यह वेबकिट ब्राउज़रों woff फ़ाइल/प्रारूप का उपयोग करने के कारण है: इस प्रकार फॉन्ट निर्दिष्ट।

फ़ॉन्ट विनिर्देशों के क्रम बदल रहा है और svg विनिर्देश के बाद हैश टैग को हटाने (क्यों कि वहाँ वैसे भी है?), का कारण बनता है वेबकिट ब्राउज़रों svg फ़ाइल/प्रारूप का उपयोग करने के लिए:

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

यह हल करती है समस्या, सभी वर्ण सही ढंग से प्रदर्शित होते हैं।

हालांकि, कम से कम विंडोज 7 64 बिट में, svg फ़ॉन्ट woff फ़ॉन्ट जितना तेज नहीं है, यह धुंधला है इसलिए मैं इस समाधान का उपयोग नहीं करूँगा और बेहतर उम्मीद कर रहा हूं।

Answer 4

यह सब फ़ॉन्ट पर ही उबलता है।

देखो यहाँ
http://jsfiddle.net/DdMej/2/

पहली पंक्ति गूगल फोंट द्वारा Drod संस उपयोग करता है। दूसरी पंक्ति आपके साइट पर मौजूद फ़ॉन्ट का उपयोग करती है।

---

संपादित 1
स्क्रीनशॉट
http://imageshack.us/photo/my-images/811/screeniy.png/

Answer 5

मैं भी मेरे गूगल फ़ॉन्ट 'Lato' देख रहा था गाया पाठ के निचले भाग में काट दिया। मेरे मामले में, मुझे Google फ़ॉन्ट्स का उपयोग करने के बजाय स्थानीय रूप से फ़ॉन्ट फ़ाइलों की सेवा करने की आवश्यकता थी। ऐसा करने के लिए मैं:

• फ़ॉन्ट को कनवर्ट किया गया।Font2Web
• के साथ फ़ाइलें webfont को TTF फ़ॉन्ट फ़ाइलें स्थानीय रूप से के रूप में स्थिर फ़ाइल संपत्ति स्थानीय होस्ट से bulletproof @font-face implementation

यह मेरा कटौती बंद गाया पाठ मुद्दा सफाया के साथ मेरी सीएसएस में

शामिल फोंट में सेवा की।