How to fix serrated fonts in chrome?

4

I have a problem with Google Chrome. I do not know if it's CSS, but the fonts declared in CSS are getting serrated mostly in Chrome. I have already tried the following anti-alarming properties:

-webkit-font-smoothing;
font-smooth;
text-stroke;
text-shadow;

The site that has this problem is this .

    
asked by anonymous 13.02.2015 / 14:31

1 answer

3

This behavior has been corrected in Chrome 37. To simulate a comparable anti-aliasing result, you can use text-shadow, as in the following example:

.teste
{
    color: black;
    font-size: 50px;
    text-align: center;
    line-height: 1;
}

.teste.antialias{
    -webkit-font-smoothing: antialiased;
    -webkit-text-shadow: rgba(0,0,0,.01) 0 0 1px;
    text-shadow: rgba(0,0,0,.01) 0 0 1px;
    }
<span class='teste'>Alias</span><br>
(pre-Chrome 37)<br/>
<br/>
<span class='teste antialias'>Antialias</span>

Source: How to apply font anti-alias effects in CSS? , Stack Overflow

    
13.02.2015 / 21:57