मेरे Google वेब फ़ॉन्ट्स क्यों पिक्सेल किए गए हैं?

Question

मैं एक साधारण वेबसाइट में Google फोंट का उपयोग करने की कोशिश कर रहा हूं। टैग है कि मैं उपयोग कर रहा हूँ

<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css' > 

है सीएसएस

body { 

    padding: 0; 
    text-align: center; 

    line-height: 180%; 

    background: #1a2426; 
    color: #f7f7f7; 

    font-family: 'Lobster', serif; 

} 

है समस्या यह है कि फॉन्ट pixelated लग रहा है जब मैं यह क्रोम में ऊपर खींचने है। मैं सोच रहा था कि कोई भी क्यों समझा सकता है?

उदाहरण

Answer 1

यह ब्राउज़र की एक समस्या यह खिड़कियों की समस्या नहीं है नहीं है।

चेक इस https://graphicdesign.stackexchange.com/questions/265/font-face-loaded-on-windows-look-really-bad-which-font-are-you-using-that-are

Answer 2

ऐसा लगता है कि क्रोम विकास इस मुद्दे की टीम is aware। यह उनके द्वारा एक बग के रूप में माना जाता है कि वे काम कर रहे हैं।

मैंने पाया है कि सबसे अच्छा समाधान किसी भी अनुशंसित सीएसएस हैक (थोड़ी सी ड्रॉप छाया आदि) करने के लिए नहीं है, लेकिन अपने फ़ॉन्ट स्टैक को पुनर्व्यवस्थित करने के लिए है ताकि .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’); 
} 

बाहर this article अधिक जानकारी के लिए जाँच करें।

आप लोड फ़ॉन्ट ऑर्डर व्यवस्थित कर सकते हैं। आपको बस यह समझना होगा कि http://fonts.googleapis.com/css?family=Lobster 'rel =' स्टाइलशीट 'टाइप =' टेक्स्ट/सीएसएस '> आप एक बाहरी स्टाइलशीट ला रहे हैं जो कहता है:

/* latin */ 
@font-face { 
    font-family: 'Lobster'; 
    font-style: normal; 
    font-weight: 400; 
    src: local('Lobster'), local('Lobster-Regular'), url(http://fonts.gstatic.com/s/lobster/v11/G6-OYdAAwU5fSlE7MlBvhVKPGs1ZzpMvnHX-7fPOuAc.woff2) format('woff2'); 
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000; 
} 

तो बस अपनी स्टाइलशीट में सीधे उस कॉल को शामिल करके, आपके पास ऑर्डर लोड पर नियंत्रण होता है।