How to correct serrated source in Chrome?

Asked

Viewed 4,093 times

4

I’m having a problem with Google Chrome. I don’t know if it’s CSS, but the fonts declared in CSS are getting serrated mainly in Chrome. I have tried the following properties to decrease serration (anti-alising):

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

The site with this problem is this.

css google-chrome

  • Here is normal and I’m using Firefox.

  • @Patrick, I forgot to add, the problem is in Chrome =/ thank you.

  • 1

    This problem had been fixed, will understand what goes on in the Google browser. An alternative is you use fonts in svg.

  • Post an example that is not a link (use stacksnippet for this). Online links are usually edited and so the problem cannot be seen.

  • 1

    Can resolve with Cleartype that can be seen here: http://www.ilista.com.br/blog/136-como-resolve-o-problema-de-fontes-serrated

1 answer

3


This behavior has been corrected in Chrome 37. To simulate a result comparable to Antialias, 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 (in English)

Browser other questions tagged css google-chrome

You are not signed in. Login or sign up in order to post.