Existe alguma "suavização de fonte" no Google Chrome?

141

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 .:

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:

google chrome à esquerda, firefox / internet explorer à direita

imakeitpretty
fonte
eles ficam bem para mim no chrome e no firefox ... você poderia adicionar uma tela de impressão?
JFK
Também no iPhone / iOS eles parecem muito bons.
insertusernamehere
Você está usando o Windows? Nesse caso, o mecanismo de suavização ClearType do sistema operacional pode ser a causa. Eu tentei essa página no Mac OS, Ubuntu, Fedora e Chrome OS, além do Windows; o último sendo o único que não é renderizado corretamente, por causa do que suspeito ser o mecanismo ClearType.
Jules
sim é janelas. Você sabe o que eu posso fazer sobre isso?
Imakeitpretty 15/07/12
só descobri este recurso útil: chrome: // flags / # lcd-text-aa - habilitá-lo e suaviza texto para você
cinek

Respostas:

162

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:

insira a descrição da imagem 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

insira a descrição da imagem aqui

EXEMPLO POSITIVO:

Superior: Firefox 23, inferior: Chrome 29

insira a descrição da imagem aqui

EXEMPLO NEGATIVO: Chrome 30

insira a descrição da imagem aqui

EXEMPLO NEGATIVO: Chrome 29

insira a descrição da imagem aqui

Solução

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

insira a descrição da imagem aqui

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.

Sliq
fonte
1
O problema não está em todos os navegadores em execução no Windows, é apenas no caso do Chrome. Firefox, Opera e IE possuem anti-aliasing adequado das fontes. Embora possa ser corrigido no chrome usando a -webkit-font-smoothingpropriedade Veja minha resposta abaixo.
Kushagra 17/07
1
Para texto em preto, eu usei text-shadow: #333 0px 0px 1px;. Muito obrigado pela dica.
Yoone
6
Talvez tenha se perdido na tradução, mas o -webkit-text-stroke só funciona quando você usa um alfa da cor da fonte. Portanto, para uma fonte preta, uso algo como "-webkit-text-stroke: 1px rgba (0,0,0,0.1)".
Nezroy 28/03
Percebi que o Chrome 30 no Mac agora exibe a mesma falta de antialiasing.
jwadsack
1
No tíquete oficial na placa do cromo para este problema, code.google.com/p/chromium/issues/detail?id=137692, ele parece ter o objetivo de corrigir a v37, se eu tiver desestabilizado corretamente a última postagem do tópico .
Gruber
46

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');
  }
}

insira a descrição da imagem aqui

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

Jaime Fernandez
fonte
6
Esta é realmente a resposta correta, no entanto, pode ser simplificada. Simplesmente listar a versão SVG PRIMEIRO na lista de fontes também resolve o problema!
Jduncanator #
2
Essa resposta fornece - de longe - os melhores resultados. A fonte SVG parece x100 melhor que o hack -webkit-text-stroke. A principal desvantagem é o tamanho da fonte da versão SVG; é normalmente muito maior :-( Google realmente precisa resolver isso o mais cedo possível
Timidfriendly
Eu concordo totalmente ! Vou vincular a esta resposta de dentro da minha resposta.
Sliq
@jduncanator Listar primeiro o SVG não é aconselhável - isso significa que a fonte SVG será carregada por todos os navegadores que a suportam, enquanto você só precisa do Chrome no Windows.
RoelN
@jduncanator Os dois principais culpados são o suporte a sugestões e o tamanho grande do arquivo (a compactação gzip para fontes não é ativada por padrão em muitos servidores).
precisa saber é
22

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 .

Kushagra
fonte
11
Eu tenho a versão mais recente do Chrome hoje 8 de fevereiro de 2013 e esta página aqui não mostra nenhuma diferença entre eles maxvoltar.com/sandbox/fontsmoothing
thednp
4
Isso não funciona (testado no Windows). Como o Mac faz isso de qualquer maneira, marquei para dissuadir as pessoas de usá-lo.
precisa
4
Isso não funciona. Eu apenas tentei no Windows 8. Com a versão mais recente do Chrome (a partir de 8/10/2013).
jay_t55
3
No Mac Chrome e Safari, isso funciona, por isso vale a pena adicionar. Apple.com mesmo usa-lo em seu estilo base.css:body { font: 12px/18px "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif; -webkit-font-smoothing: antialiased; }
Justin
1
o equivalente do firefox é -moz-osx-font-smoothing: tons de cinza;
Jeff Walters
14

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.

Rishabh Gupta
fonte
a suavização de fonte não faz mais nada, mas o traço de texto funciona e pode ajudar em algumas fontes. Eu parecia obter melhores resultados com um acidente vascular cerebral de 0,5 px e rgba (0,0,0,0,5).
Moss
o equivalente do firefox é -moz-osx-font-smoothing: tons de cinza;
Jeff Walters
isso é legal ... basta substituir # 34343b por herdar ..;)
Sagive SEO
9

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

tamanho da fonte: 48 px

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á

tamanho da fonte: 49px

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:

-webkit-backface-visible: visível;

Para isso:

-webkit-backface-visible: oculto;

(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

Sem -webkit-backface-visibility: hidden;

Com

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.

Yavierre
fonte