@ फ़ॉन्ट-फेस svg क्रोम में ठीक से काम नहीं कर रहा है?

Question

मुझे एक विशिष्ट फ़ॉन्ट और जिस तरह से इसे क्रोम में प्रस्तुत किया गया है, उसके साथ कोई समस्या है।

फ़ायरफ़ॉक्स ttf का उपयोग करने के कारण फ़ॉन्ट को ठीक से दिखाता है।

क्रोम एंटीअलियास का उपयोग नहीं करता है और फ़ॉन्ट भी 'तेज' और बदसूरत है।

यह सीएसएस घोषणा मैं

@font-face { 
    font-family: 'HelveticaNeueLT Std Thin'; 
    src: url(../fonts/h2.eot); 
    src: url(../fonts/h2.svg#test) format('svg'), 
     url(../fonts/h2.woff) format('woff'), 
     url(../fonts/h2.ttf) format('truetype'); 
font-weight: normal; 
font-style: normal; 
} 

इस्तेमाल किया मैं निष्कर्ष है कि समस्या svg घोषणा/font फ़ाइल के साथ है करने के लिए आ गए हैं। यदि मैं हैश टैग का उपयोग नहीं करता हूं और इसे केवल .svg के रूप में छोड़ देता हूं, तो यह एंटीअलाइज्ड प्रदान करता है लेकिन एक अलग लाइन-ऊंचाई पर, थोड़ा बंद स्थिति के साथ। अगर मैं .svg # कुछ भी जोड़ता हूं, तो यह बिल्कुल एंटीअलियास नहीं करता है और बदसूरत दिखता है।

इस समस्या को हल करने में मेरी सहायता करने के लिए कोई सुझाव स्वागत है।

पीएस: विंडोज एंटीअलाइजिंग ठीक है, मैंने इसका परीक्षण किया। मैंने @media screen and (-webkit-min-device-pixel-ratio:0) केवल एसवीजी फ़ॉन्ट के लिए घोषणा की, सफलता के लिए भी कोशिश की। मुझे एहसास है कि यह एक पोस्टोस्ट हो सकता है लेकिन संबंधित प्रश्नों से सभी समाधानों का प्रयास करने के बाद, मैं थोड़ा हताश हूं।

Answer 1

वेबफ़ॉन्ट विंडोज पर Chrome पर अच्छी antialias के साथ प्रस्तुत करने के लिए, आप फ़ॉन्ट घोषणा में इस प्रारूप का उपयोग करने की आवश्यकता है:

@font-face { 
    font-family: 'Futura'; 
    src: url('futura.eot'); 
    src: url('futura.eot?#iefix') format('embedded-opentype'), 
     url('futura.woff') format('woff'), 
     url('futura.ttf') format('truetype'), 
     url('futura.svg#futura') format('svg'); 

    font-weight: normal; 
    font-style: normal; 
} 

@media screen and (-webkit-min-device-pixel-ratio:0) { 
    @font-face { 
     font-family: 'Futura'; 
     src: url('futura.svg#futura') format('svg'); 
    } 
} 

मूल रूप से, आप एसवीजी फ़ॉन्ट स्वरूप का उपयोग करना क्रोम के लिए मजबूर करने की जरूरत है। आप इसे .svg संस्करण के शीर्ष पर यूआरएल ले जाकर ऐसा कर सकते हैं, हालांकि विंडोज़ पर क्रोम को ऐसा करने के दौरान लेआउट को गड़बड़ करने में समस्याएं थीं (संस्करण 30 तक और इसमें)। मीडिया क्वेरी का उपयोग करके फ़ॉन्ट घोषणा को ओवरराइड करके, इन मुद्दों को हल किया जाता है।

इसके अलावा: कभी-कभी बेसलाइन स्थिति ओपनटाइप फोंट और एसवीजी फ़ॉन्ट्स के बीच मेल नहीं खाती है लेकिन आप इसे एसवीजी फ़ॉन्ट फ़ाइलों को संपादित करके समायोजित कर सकते हैं। एसवीजी फोंट एक्सएमएल आधारित होते हैं और अगर आप घोषणा

<font-face units-per-em="2048" ascent="1900" descent="-510" /> 

को देखो आप चढ़ाई के लिए मूल्य बदल सकते हैं और यह अन्य फ़ॉन्ट प्रारूप संस्करणों मैच के लिए मिल सकता है।

Answer 2

Font Squirrel's webfont generator व्यवस्था उनके @font-face सीएसएस इस तरह:

@font-face { 
    font-family: 'HelveticaNeueLT Std Thin'; 
    src: url('../fonts/h2.eot'); 
    src: url('../fonts/h2.eot?#iefix') format('embedded-opentype'), 
     url('../fonts/h2.woff') format('woff'), 
     url('../fonts/h2.ttf') format('truetype'), 
     url('../fonts/h2.svg#h2') format('svg'); 
    font-weight: normal; 
    font-style: normal; 
} 

क्यों आदेश यहां महत्वपूर्ण है के बारे में अधिक जानकारी: http://paulirish.com/2009/bulletproof-font-face-implementation-syntax/

यदि वह फिर भी आपको परेशानी दे रही है, ऊपर उल्लिखित जनरेटर का उपयोग करके देखें, चुनें विशेषज्ञ विकल्प, और विभिन्न सेटिंग्स के साथ खेलें (विशेष रूप से रेंडरिंग और एक्स-ऊंचाई के तहत)।

Answer 3

@ font-face में एसवीजी फ़ाइलों का संदर्भ देते समय फ़ाइलपैथ में आईडी (#) .svg फ़ाइल के अंदर तत्व निर्दिष्ट कर रहा है। सही आईडी खोजने के लिए आप इसे एक संपादक में खोल सकते हैं और <font> टैग का निरीक्षण कर सकते हैं।

उदाहरण के लिए:

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

संबंधित है:

<font id="latobold" horiz-adv-x="1187" >

Answer 4

इस उदाहरण की जाँच इस @ फॉन्ट-फेस कार्यान्वयन

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

h1 { 
    font-family: 'OpenSans'; 
    font-weight: 300%; 
} 

अधिक जानकारी के लिए कोशिश https://github.com/ttibensky/BulletProof-font-face-implementation

Answer 5

लिली और फ़ॉन्ट गिलहरी का सुझाव के रूप में, अपने एसवीजी फ़ॉन्ट लगभग हमेशा @font-face सूत्रों की अपनी सूची में सबसे नीचे आना चाहिए। आप नहीं चाहते कि ब्राउज़र एक एसवीजी फ़ॉन्ट का उपयोग करे जब तक कि यह किसी और चीज का उपयोग नहीं कर सकता।

इसका कारण यह है कि एसवीजी फोंट बहुत खराब समर्थित हैं, और समर्थन घट रहा है। इस पोस्ट (2015) के रूप में, एसवीजी फोंट no longer supported by Chrome (38) हैं और केवल सफारी 8 द्वारा समर्थित हैं, आईओएस सफारी 8.1 और Android ब्राउज़र 37. http://caniuse.com/#feat=svg-fonts

संपादित करें: फ़र, 2016 के रूप में, Android ब्राउज़र 47 नहीं रह गया है एसवीजी का समर्थन करता है फोंट्स। सफारी और आईओएस सफारी अभी भी उनका समर्थन करते हैं, और ऐसा लगता है कि वे एकमात्र ब्राउज़र हैं।