क्रोम में वेब फ़ॉन्ट

Question

मेरे पास एक वेबफॉन्ट है जो फ़ायरफ़ॉक्स पर अद्भुत दिखता है, क्रोम पर इतना नहीं। मैंने कम से कम शानदार परिणामों के साथ text-rendering संपत्ति के साथ खेलने का प्रयास किया है। मेरे सीएसएस कुछ इस तरह है:

@font-face { 
    font-family: 'TextFont'; 
    src: url('[my font file url]') format('truetype'); 
    font-weight: normal; 
    font-style: normal; 
} 
body { 
    font-family: TextFont, Tahoma, Geneva, sans-serif; 
    text-rendering: auto; 
} 

text-rendering बदलने फ़ायरफ़ॉक्स में कुछ भी दिखाई नहीं देता है, तो मैं इसके लिए एक भी स्क्रीनशॉट पोस्टिंग कर रहा हूँ।

परिणाम:

• फ़ायरफ़ॉक्स (यानी "यह कैसा दिखना चाहिए")

  

• क्रोम - text-rendering: auto

  

• क्रोम - text-rendering: optimizeLegibility

  

• क्रोम - text-rendering: optimizeSpeed

  

• क्रोम - text-rendering: geometricPrecision

  

फ़ायरफ़ॉक्स की तुलना में सभी क्रोम स्क्रीनशॉट वास्तव में खराब दिखते हैं। क्या सीएसएस में मुझे कुछ याद आ रहा है?

मैं विंडोज 7, फ़ायरफ़ॉक्स 8.0 और क्रोम 15.0 का उपयोग कर रहा हूं।

Answer 1

से मेरे कोड प्राप्त सीएसएस। पाठ प्रतिपादन इंजन फ़ायरफ़ॉक्स और क्रोम के बीच अलग हैं और आप परिणाम देख रहे हैं। यदि फ़ॉन्ट को सही तरीके से संकेत नहीं दिया गया है और वेब फ़ॉन्ट के लिए तैयार किया गया है तो आप इस तरह के परिणामों को बढ़ाए जाने की उम्मीद कर सकते हैं।

से प्राप्त फ़ॉन्ट कहां से लिया गया था?

आप यह देखने के लिए FontSquirrel के माध्यम से इसे चलाने का प्रयास कर सकते हैं कि एथान ऑफ़र के स्वचालित संकेतों में से कोई भी इसे सामान्य कर सकता है या नहीं।

प्रतिपादन और DiretWrite पर कुछ अतिरिक्त जानकारी जो आप बड़े अंतरियों के रूप में देख रहे हैं .... http: //blogs.adobe.com/typblography/2010/11/microsoft-directwrite-is-coming.html

Answer 2

यह मैं मेरा सब कैसे करना है और यह आईई, फ़ायरफ़ॉक्स पर काम किया है, क्रोम

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

} 
body{ 
font: 12px 'NeutraTextBold', sans-serif; 
color: #FFF; 
} 

मैं वास्तव में कुछ भी आप इस के माध्यम से सुधार करने के लिए क्या कर सकते हैं नहीं है fontsquirrel

Answer 3

इस प्रयास करें:

-webkit-text-stroke: .5px 

।5 मनमाने ढंग से है - 0 और 1 के बीच कुछ पिक्सेल मान कुंजी है। यह फ़ॉन्ट के उप-पिक्सेल संकेत को मजबूर करता है।

एक डेमो यहाँ देखा जा सकता: http://dabblet.com/gist/4154587

Answer 4

सुनिश्चित नहीं हैं कि अगर यह है कि तुम क्या देख रहे हैं, लेकिन क्रोम विरोधी aliasing और ट्रू टाइप फोंट के साथ कोई समस्या नहीं है। प्रति http://www.fontspring.com/blog/smoother-web-font-rendering-chrome के रूप में, आप इसके बजाय अपने फॉन्ट-फेस में ट्रू टाइप, उदा .:

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

सबसे बड़ी नकारात्मक पक्ष यह है कि Safari दोनों svg और WOFF डाउनलोड जाएगा से पहले एसवीजी फ़ॉन्ट निर्दिष्ट कर सकते हैं।

Answer 5

क्रोम क्रोम 37 में छोड़ा गया है, वे विंडोज ग्राफिक्स डिवाइस इंटरफ़ेस से माइक्रोसॉफ्ट के डायरेक्टवाइट एपीआई में स्विच कर रहे हैं, एक ऐसी तकनीक जो फोंट आधुनिक स्क्रीन पर दिखने के तरीके को बेहतर बनाती है।

बीटा अब बाहर है: https://www.google.com/chrome/browser/beta.html

गूगल से: http://blog.chromium.org/2014/07/chrome-37-beta-directwrite-on-windows.html