Melhorando a má renderização de fontes web e ícones

mal-renderizado-font

Gosto muito de usar em meus projetos o Google Web Fonts e os ícones do Icomoon  , mas o interessante que no Chrome as mesmas ficam mal renderizadas (serrilhados/pixelados), como a imagem abaixo:

mal-renderizado

Uma das soluções que encontrei foi usar acrescentar essa linha no meu “body” do CSS:

body{
  -webkit-text-stroke: 0.2px;
}

Ela dará um pequeno desfoque no contorno dos textos tornando com curvas mais delineadas e menos serrilhadas.

No caso dos ícones acrescentei estas linhas no final do arquivo em que importa as fontes dos ícones:

@media screen and (-webkit-min-device-pixel-ratio:0) {
 @font-face {
 font-family: 'icomoon';
 src: url('fonts/icomoon.svg#icomoon') format('svg');
 }
 }

Veja o resultado final:

otimizado

 

Fonte: http://www.dev-metal.com/fix-ugly-font-rendering-google-chrome/

Deixe uma resposta

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s