पीसी के लिए क्रोम में फ़ॉन्ट-फेस प्रतिपादन समस्या

Question

मैंने एक साइट पर एक फ़ॉन्ट एम्बेड करने के लिए फ़ॉन्ट-गिलहरी का उपयोग किया (चयनित संकेत चुनने के साथ), और यह पीसी के लिए क्रोम v15.0 में ठीक से प्रस्तुत नहीं कर रहा है। फ़ॉन्ट दिखाता है, लेकिन खराब है। मुझे यकीन है कि फ़ॉन्ट-गिलहरी ने मुझे सही कोड दिया है, इसलिए मुझे लगता है कि मेरे सीएसएस में एक संघर्ष है। आपकी सहायता के लिये पहले से ही धन्यवाद।

Link to site

@font-face { 
    font-family: 'RockwellStd-Light'; 
    src: url('rockwellstdlight-webfont.eot'); 
    src: url('rockwellstdlight-webfont.eot?#iefix') format('embedded-opentype'), 
     url('rockwellstdlight-webfont.woff') format('woff'), 
     url('rockwellstdlight-webfont.ttf') format('truetype'), 
     url('rockwellstdlight-webfont.svg#RockwellStdLight') format('svg'); 
    font-weight: lighter; 
    font-style: normal; 

} 

h1 { 
    font-family:'RockwellStd-Light', Helvetica, Ariel; 
    font-size:34px; 
    color:#407d3b; 
    font-weight:lighter; 
    margin-left:20px; 

} 

h2 { 
    font-family:'RockwellStd-Light', Helvetica, Ariel; 
    font-size:32px; 
    color:#ece1af; 
    font-weight:lighter; 
    line-height:42px; 

} 

h3 { 
    font-family:'RockwellStd-Light', Helvetica, Ariel; 
    font-size:20px; 
    color:#FFF; 
    font-weight:lighter; 

} 

p { 
    font-family:'RockwellStd-Light', Helvetica, Ariel; 
    font-size:14px; 
    line-height:17px; 
    color:#333; 
    text-align:justify; 

} 

.criteria_table { 
    font-family:'RockwellStd-Light', Helvetica, Ariel; 
    font-size:14px; 
    color:#FFF; 

} 

Answer 1

आप पाठ-छाया निर्दिष्ट कर सकते हैं:

text-shadow: 0 0 1px rgba(0, 0, 0, .01); 

जब कस्टम फोंट का उपयोग कर, उन्हें गूगल क्रोम में बेहतर बनाने के लिए प्रस्तुत करना। यह क्रोम को एक वैकल्पिक प्रतिपादन पथ का उपयोग करने के लिए मजबूर करता है। कृपया ध्यान दें कि यह अंतिम उपयोगकर्ता मशीन पर सीपीयू लोड बढ़ाएगा।

Answer 2

मैं माफी चाहता guyes हूँ, लेकिन यह क्रोम में अब और काम नहीं करता है 16.

समान विषय यहाँ है: @font-face anti-aliasing on windows and mac

और मैं यहाँ अब गूगल क्रोम फोरम पर इसके बारे में लिखा, प्रतिक्रियाओं के लिए इंतजार : http://www.google.com/support/forum/p/Chrome/thread?tid=43f549bc2a960a12&hl=en

Answer 3

https://stackoverflow.com/a/9041280/1112665

@ फॉन्ट-फेस के लिए वितरित फोंट, ठीक सही .eot नीचे लेकिन .woff ऊपर और

०१२३५१६४१०६ .ttf एसवीजी फ़ाइल डाल करने के लिए है

इस से:

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

इस के लिए

:

@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’); 
} 

यह सुधार के उदाहरण यहाँ देखा जा सकता:

FontSpring Examples
Adtrak Examples

Answer 4

रूप hisnameisjimmy पहले ही बताया, समाधान है एसवीजी फोंट है, जो हमेशा विरोधी aliasing साथ गाया जाता है का उपयोग करने के लिए, लेकिन यह भी कुछ कमियां भी हैं:

• एसवीजी फोंट किसी भी इशारा जानकारी नहीं होती है, तो प्रदान की गई पत्र के रूप में कुरकुरा वे हो सकता है के रूप में नहीं कर रहे हैं एक सिस्टम पर फ़ॉन्ट-चिकनाई सक्षम है।
• एसवीजी फोंट का वजन और शैली बदला नहीं जा सकता है, इसलिए font-weight:bold; या font-style:italic; का कोई प्रभाव नहीं पड़ता है।

हालांकि, कम से कम पहली समस्या को केवल एसवीजी फ़ॉन्ट्स का उपयोग करके हल किया जा सकता है यदि फ़ॉन्ट-स्मूथिंग वास्तव में अक्षम है। फ़ॉन्ट-स्मूटिंग का पता लगाने के तरीके पर एक अच्छा post at User Agent Man है, जिसे मैं एक छोटी सी स्क्रिप्ट (~ 600 बाइट्स) बनाने के लिए उपयोग करता था, जो फ़ॉन्ट चिकनाई अक्षम होने पर स्वचालित रूप से आपके फ़ॉन्ट-फेस सीएसएस को अपडेट करता है।

आप my Font Smoothie script at GitHub'S GIST पा सकते हैं और तुम सब करने की है, तो अपने पेज में कहीं भी निम्न पंक्ति जोड़ने के लिए है:

<script src="fontsmoothie.min.js" type="text/javascript"></script> 

हालांकि, अगर आप भी अच्छे लग ग्लिफ़ प्राप्त करने के लिए एक अच्छी तरह से hinted फॉन्ट की जरूरत है। सौभाग्य से ttfautohint का उपयोग कर एक टीटीएफ-फ़ॉन्ट में कुछ स्वचालित रूप से जेनरेट किए गए संकेत जोड़ने का एक तरीका है और फिर आप वेब-फोंट उत्पन्न करने के लिए फ़ॉन्ट गिलहरी का उपयोग कर सकते हैं। पूरी प्रक्रिया थोड़ा मुश्किल है इसलिए मैंने an article on how to create web-fonts on Pixels|Bytes लिखा, जो बताता है कि फ़ॉन्ट पर संकेत जोड़ने और मेरी फ़ॉन्ट स्मूथी स्क्रिप्ट का उपयोग कैसे करें। आशा है कि इस मदद करता है :)

पुनश्च: मुझे पता है कि मेरे अपने ब्लॉग को यहाँ की सराहना नहीं की जाएगी हूँ, लेकिन मैं अपनी पोस्ट समस्या के लिए एक अच्छा समाधान का वर्णन करता है लगता है, तो मैं वैसे भी यह पोस्ट। अगर आप मुझे लिंक को हटाना चाहते हैं तो कृपया एक टिप्पणी छोड़ दें और मैं ऐसा करूँगा।