Open Sans Google Web Fonts Rendering in Chrome

问题:

I've noticed a significant difference in rending of Open Sans (Google Web Font) from Chrome, to Safari/Firefox. I attach two photos, the first being chrome and the second safari.

All I have in the stylesheet is:

        font-family: 'Open Sans', sans-serif;
        font-size:14px;

Hope you can help, as I really like the chrome (first image) rendering but HATE the other one!!

回答1:

I've had luck in the past using font-weight: lighter!important; on fonts that appear bolder and completely different than what they are intended to look like. Each browser interprets fonts differently. Google Web Fonts tries its best to serve the correct versions, but sometimes there are drastic changes between browsers and operating systems.

Hope this information helps! Let me know if this solution works, otherwise I can look into it further. Open Sans is a nice font for web, nice choice :)

回答2:

Add to head

<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,600,300' rel='stylesheet' type='text/css'>

CSS rule

.btn{
    font-family: 'Open Sans', sans-serif;
    font-weight:300;
    text-rendering: optimizeLegibility;
font-size: .9em;
}

回答3:

I added directly this line im my header and it's working!

<link href='//fonts.googleapis.com/css?family=Open+Sans:300,400,600' rel='stylesheet' type='text/css'>

.nav > li > a {
    color: #000; font-size: 13px; font-weight: 600;
}

Instead of just calling the font without sizes in the Header and defining it afterward as bold, a method who doesn't work.

回答4:

There is an issue where Safari renders fonts at fixed sizes and other browsers render them more exactly:

example at tech.Ozake.com

So if you request your text to be a size that falls between two of Safari's steps, you will get a different result in Safari than in other browsers.

So depending on how you declare the font sizes and how the window is sized, you will get differently-sized results.

回答5:

This workaround helped me to make Open Sans to look very close in different browsers.

<script>
function loadCss(path){
    var fileref=document.createElement("link");
    fileref.setAttribute("rel", "stylesheet");
    fileref.setAttribute("type", "text/css");
    fileref.setAttribute("href", path);

    document.getElementsByTagName("head")[0].appendChild(fileref);
}

if (ViewUtil.isChromeBrowser()) {
    loadCss('https://fonts.googleapis.com/css?family=Open+Sans:400,600');
} else {
    loadCss('https://fonts.googleapis.com/css?family=Open+Sans:300,600');
}

we are forcing a bit 'bolder' version of font for chrome

回答6:

You apparently didn't reset the default browser CSS, try setting font-weight explicitly.