Estou usando as páginas da web do google e elas funcionam bem com tamanhos de fonte super grandes, mas aos 18px parecem horríveis. Eu li aqui e ali que existem soluções para suavização de fontes, mas não encontrei nenhuma que explique claramente e os poucos trechos que encontrei não funcionam.

Minha h4aparência é horrível em praticamente todos os navegadores, mas o Chrome é o pior. No Chrome, praticamente todas as minhas fontes parecem terríveis.

Alguém pode me apontar na direção certa? Talvez você saiba de um recurso que explica isso claramente? Obrigado!

EXEMPLO SCREENSHOT # 1

Esta captura de tela mostra a página inicial de https://www.dartlang.org/ , uma linguagem de programação criada pelo Google (para que possamos sugerir que este site também é criado pelo Google) e usa as Google Webfonts.

A captura de tela mostra o Google Chrome à esquerda, Firefox / Internet Explorer à direita .:

EXEMPLO SCREENSHOT # 2

Esta captura de tela mostra uma página de informações do produto no Adobe.com, usando as fachadas fornecidas pelo Typekit. O Adobe e Typekit são profissionais quando se trata de fontes.

A captura de tela mostra o Google Chrome à direita e o Firefox / Internet Explorer à esquerda:

Status do problema, junho de 2014: corrigido com o Chrome 37

Por fim, a equipe do Chrome lançará uma correção para esse problema com o Chrome 37, que será lançado ao público em julho de 2014. Veja exemplo de comparação do Chrome 35 atual estável e do Chrome 37 mais recente (pré-visualização do desenvolvimento) aqui:

Status do problema, dezembro de 2013

1.) Há NO solução adequada quando as fontes de carregamento via @import, <link href=ou o do Google webfont.js. O problema é que o Chrome simplesmente solicita .woff arquivos da API do Google, que são terrivelmente renderizados. Surpreendentemente, todos os outros tipos de arquivo de fonte são renderizados com perfeição. No entanto, existem alguns truques CSS que "suavizarão" a fonte renderizada um pouco; você encontrará as soluções alternativas mais detalhadas nesta resposta.

2.) Existe uma solução real para isso ao auto-hospedar as fontes, postadas pela primeira vez por Jaime Fernandez em outra resposta nesta página do Stackoverflow, que corrige esse problema carregando fontes da web em uma ordem especial. Eu me sentiria mal simplesmente copiando sua excelente resposta, então dê uma olhada lá. Há também uma solução (não comprovada) que recomenda o uso apenas de fontes TTF / OTF, pois agora elas são suportadas por quase todos os navegadores.

3.) A equipe de desenvolvedores do Google Chrome trabalha nessa questão. Como houve várias grandes mudanças no mecanismo de renderização, obviamente há algo em andamento.

Eu escrevi uma grande postagem no blog sobre esse assunto, fique à vontade para dar uma olhada: Como corrigir a renderização de fonte feia no Google Chrome

Exemplos reproduzíveis

Veja como está o exemplo da pergunta inicial hoje, no Chrome 29:

EXEMPLO POSITIVO:

Esquerda: Firefox 23, direita: Chrome 29

EXEMPLO POSITIVO:

Superior: Firefox 23, inferior: Chrome 29

EXEMPLO NEGATIVO: Chrome 30

EXEMPLO NEGATIVO: Chrome 29

Solução

Corrigindo a captura de tela acima com -webkit-text-stroke:

A primeira linha é o padrão, a segunda possui:

-webkit-text-stroke: 0.3px;

A terceira linha tem:

-webkit-text-stroke: 0.6px;

Então, a maneira de consertar essas fontes é simplesmente dar a elas

-webkit-text-stroke: 0.Xpx;

ou a sintaxe RGBa (por nezroy, encontrada nos comentários! Obrigado!)

-webkit-text-stroke: 1px rgba(0,0,0,0.1)

Há também uma possibilidade desatualizada : dê ao texto uma sombra simples (falsa):

text-shadow: #fff 0px 1px 1px;

Solução RGBa (encontrada no blog de Jasper Espejo):

text-shadow: 0 0 1px rgba(51,51,51,0.2);

Eu fiz um post sobre isso:

Se você deseja ser atualizado sobre esse problema, consulte a postagem do blog correspondente: Como corrigir a renderização feia da fonte no Google Chrome . Vou postar notícias se houver notícias sobre isso.

Minha resposta original:

Esse é um grande erro no Google Chrome e a equipe do Google Chrome sabe disso, consulte o relatório oficial de erros aqui . Atualmente, em maio de 2013, mesmo 11 meses após o bug ter sido relatado, ele não está resolvido. É estranho que o único navegador que atrapalha o Google Webfonts seja o navegador do Google, o Chrome (!). Mas há uma solução simples que resolverá o problema, veja abaixo a solução.

DECLARAÇÃO DA EQUIPE DE DESENVOLVIMENTO DO GOOGLE CHROME, MAIO DE 2013

Comentários oficiais do relatório de erros:

Nossa renderização de fonte do Windows está sendo ativamente trabalhada. ... Esperamos ter algo dentro de um marco ou dois com o qual os desenvolvedores possam começar a jogar. A rapidez com que ele fica estável é, como sempre, a rapidez com que podemos erradicar e queimar qualquer regressão.

Eu tive o mesmo problema e encontrei a solução neste post de Sam Goddard ,

A solução se definiu a chamada para a fonte duas vezes . Primeiro, como recomendado, para ser usado em todos os navegadores e depois de uma chamada específica apenas para o Chrome com uma consulta de mídia especial:

@font-face {
  font-family: 'chunk-webfont';
  src: url('../../includes/fonts/chunk-webfont.eot');
  src: url('../../includes/fonts/chunk-webfont.eot?#iefix') format('eot'),
  url('../../includes/fonts/chunk-webfont.woff') format('woff'),
  url('../../includes/fonts/chunk-webfont.ttf') format('truetype'),
  url('../../includes/fonts/chunk-webfont.svg') format('svg');
  font-weight: normal;
  font-style: normal;
}

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

Com esse método, a fonte ficará boa em todos os navegadores. O único ponto negativo que encontrei é que o arquivo da fonte também é baixado duas vezes.

Você pode encontrar uma versão em espanhol deste artigo na minha página

O Chrome não renderiza as fontes como o Firefox ou qualquer outro navegador. Geralmente, esse é um problema no Chrome, executado apenas no Windows. Se você deseja suavizar as fontes, use a -webkit-font-smoothingpropriedade em suas h4tags como esta.

h4 {
    -webkit-font-smoothing: antialiased;
}

Você também pode usar subpixel-antialiased, isso lhe dará um tipo diferente de suavização (tornando o texto um pouco embaçado / sombreado). No entanto, você precisará de uma versão noturna para ver os efeitos. Você pode aprender mais sobre suavização de fonte aqui .

Ok, você pode usar isso simplesmente

-webkit-text-stroke-width: .7px;
-webkit-text-stroke-color: #34343b;
-webkit-font-smoothing:antialiased;

Verifique se a cor do texto e a largura superior do traço do texto devem ser iguais e é isso.

Antes de tudo, direi que isso nem sempre funciona , eu testei isso com sans-seriffontes externas e fontes comoopen sans

Às vezes, quando você usa fontes grandes, tente aproximar font-size:49pxe

Este é um texto de cabeçalho com um tamanho de 48px ( font-size:48px;no elemento que contém o texto).

Mas, se você aumentar os 48px para font-size:49px;(e 50px, 60px, 80px, etc ...), algo interessante acontecerá

O texto fica automaticamente suave e parece realmente bom

Por outro lado ...

Se você estiver procurando por fontes pequenas, tente isso, mas não é muito eficaz.

Para o pai do texto, basta aplicar a próxima propriedade css: -webkit-backface-visibility: hidden;

Você pode transformar algo como isto:

Para isso:

(a fonte é Kreon)

Considere que, quando você não está colocando essa propriedade, -webkit-backface-visibility: visible;é herdado

Mas tenha cuidado , pois essa prática nem sempre dará bons resultados; se você vê com cuidado, o Chrome apenas torna o texto um pouco embaçado.

Outro fato interessante:

-webkit-backface-visibility: hidden;funcionará também quando você transformar um texto no Chrome (com a -webkit-transformpropriedade, que inclui rotações, inclinações etc.)

Sem -webkit-backface-visibility: hidden;

Com -webkit-backface-visibility: hidden;

Bem, não sei por que essas práticas funcionam, mas funciona para mim. Desculpe pelo meu inglês estranho.