Como posso melhorar a aparência da fonte no google chrome?


72

À esquerda está o firefox 4, à direita está o cromo 12.

À esquerda, o firefox 4, à direita, o chrome 12. Existe uma maneira de tornar o chrome renderizar fontes mais bonitas?

A imagem acima foi tirada no Windows XP. Abaixo está outro exemplo do windows 7.

insira a descrição da imagem aqui


Linux ou Windows?
Nicu Zecheru

Janelas. A captura de tela acima foi tirada no Windows XP. Parece um pouco melhor na minha máquina Windows 7, mas alguns sites ainda sofrem. Aqui está outro exemplo: i.imgur.com/zbuUr.png
hughes

11
Estas são fontes padrão do SO ou fontes incorporadas? (Como via TypeKit.com)?
vermelho

11
Você sabe, essa é uma boa pergunta. É mais perceptível nas fontes incorporadas. As fontes padrão seguras para a Web ficam bem. Tudo no TypeKit.com parece irregular e horrível.
hughes 12/07

Infelizmente, a renderização do TypeKit parece realmente diferente em diferentes combinações de navegador / sistema operacional. :(
red

Respostas:


35

Verifique as configurações do ClearType - a captura de tela do Chrome parece estar sendo forçada a renderizar sem serrilhado. Isso matará praticamente qualquer fonte da Web, pois elas não têm dicas monocromáticas (por razões de tamanho, entre outras coisas). Eu costumava ver isso relatado como "O IE renderiza melhor o texto", porque ignora as configurações do ClearType no nível do sistema operacional e o ativa por padrão.


Uau, esse foi o problema todo. Eu acho que o Firefox ignora as configurações de tipo claro também. Obrigado! Aproveite a sua recompensa!
Hughes

6
" ignora as configurações do ClearType no nível do sistema operacional e " e o quê?
Der Hochstapler

Também girar a aceleração da GPU funcionou para mim. Veja lonesysadmin.net/2011/09/12/…
Jimmy Bogard

5
Onde você iria verificar as configurações do ClearType?
precisa

11
Esta resposta explica como fazer isso no XP - não há "ClearType" em Iniciar ou no Painel de Controle. superuser.com/a/441694/46972
ashes999

23

Todas essas respostas estão erradas! Este é um erro grave no Google Chrome. Consulte o tópico / relatório oficial de falhas, incluindo muitas capturas de tela aqui: Relatório oficial de falhas no Código Chrome

Atualmente, a melhor solução alternativa é simplesmente fornecer ao seu elemento / título esta regra simples:

-webkit-text-stroke: 1px

Adição do Dr. John: Encontrei uma sugestão que html { -webkit-text-stroke: 0.25px}também funcionaria - encontrei aqui https://groups.google.com/forum/?fromgroups#!topic/mathjax-users/dV_TmJ1QMO4


Isso melhora ainda mais. Como habilito esse CSS para todos os sites por padrão?
ShuaiYuan

@shuaiyuancn Desculpe, o que? Por que você quer dizer com "todos os sites"? Isso não faz sentido.
Sliq

11
Faz todo o sentido. Tente pensar como usuário final, não como desenvolvedor da Web, como indica a PO original. Desativei a gravação direta no chrome: // flags e adicionei uma regra global -webkit-text-strokeno addon Stylish. Agora, o Chrome me dá um pouco mais de prazer.
ShuaiYuan

Estou confuso agora, pensei durante anos que o superusuário representa o linux sudo e é um portal para usuários avançados do Linux, não para usuários comuns da Internet. Hmmm ... estranho.
Sliq

11
Você está errado há anos. Verifique o slogan: Superusuário Para entusiastas de computadores e usuários avançados. Também não acho que usuários comuns sintonizem fontes como essa.
ShuaiYuan

16

O Chrome está lendo sua configuração ClearType, que no Windows XP está desativada por padrão.

  1. Para corrigir o problema, primeiro feche o navegador Chrome.

  2. Agora clique com o botão direito do mouse em qualquer lugar da área de trabalho e selecione 'Propriedades' no menu suspenso.

  3. Clique na guia 'Aparência' encontrada na parte superior da nova janela.

  4. E clique no botão 'Efeitos'.

  5. A segunda opção abaixo deve ler: "Use o método a seguir para suavizar as bordas das fontes da tela".

  6. Selecione a opção "ClearType".

  7. Clique em Aplicar e reabra o navegador Chrome.

A partir de agora, o Chrome processará suas fontes com suavização de serrilhado para obter um efeito suave.


2
Isso funcionou para mim, ligeiramente diferentes opções no Windows 7 embora
Gearoid Murphy

2
Funciona sem reiniciar o chrome.
Quazi Irfan

Não funcionou para mim no XP até reiniciar o Chrome.
ashes999

11
Windows 8: Painel de controle> Vídeo> Ajustar texto ClearType> continue com o assistente Avançar Avançar. Reinicie o navegador - isso ajuda.
rook

Também precisei reiniciar o computador para permitir que as alterações do ClearType fossem aplicadas no Windows 10. Ótima solução!
Simple Sandman

12

Coloque o arquivo SVG mais alto na regra css da face da fonte, primeiro ou segundo, por exemplo:

@font-face {
font-family: 'gothbook';
src: url('fonts/gothamrnd-book-webfont.eot');
src: url('fonts/gothamrnd-book-webfont.eot?#iefix') format('embedded-opentype'),
     url('fonts/gothamrnd-book-webfont.svg#GothamRoundedBookRegular') format('svg'),
     url('fonts/gothamrnd-book-webfont.woff') format('woff'),
     url('fonts/gothamrnd-book-webfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}

Ao invés de:

@font-face {
font-family: 'gothbook';
src: url('fonts/gothamrnd-book-webfont.eot');
src: url('fonts/gothamrnd-book-webfont.eot?#iefix') format('embedded-opentype'),
     url('fonts/gothamrnd-book-webfont.woff') format('woff'),
     url('fonts/gothamrnd-book-webfont.ttf') format('truetype'),
     url('fonts/gothamrnd-book-webfont.svg#GothamRoundedBookRegular') format('svg');
font-weight: normal;
font-style: normal;
}

Exemplos dessa correção podem ser vistos aqui:

Exemplos de
FontSpring Exemplos de Adtrak


Muito obrigado!! Em um projeto passado, notei que o OTF também parecia muito bom, tentei em outro projeto e que parecia terrível! SVG parece realmente bom =)
zzz

6

Você tem a aceleração de GPU ativada no Google Chrome? Digite about:flagse procure a GPU Accelerated Canvas 2D. Desative-a se estiver ativada. As fontes em alguns sites parecem realmente irregulares quando eu navegava com a aceleração ativada.


Eu costumava habilitá-lo, mas após a versão 10 a renderização da fonte foi atingida. Espero que o Google resolva o problema em algum momento.
vermelho

Foi desativado. Tentei temporariamente habilitá-lo apenas para ver o que aconteceria e não notei nenhuma diferença.
hughes

Tudo bem. Caso você consiga encontrar o que estava errado, lembre-se de atualizar aqui.
vermelho

No meu caso, desabilitar a aceleração da GPU corrigiu o alias.
#

Trabalhou para mim! Windows 7, Chrome 52
Vincent

2

No Google Chrome, clique em Chave inglesa> Opções> Sob o capô> [ao lado de Conteúdo da Web], clique em Personalizar fontes.

Altere suas configurações para que sua página se pareça com a minhaTela Minhas opções

Em seguida, clique no x e veja se seu problema foi corrigido.

Se isso não corrigir, pode haver mais uma coisa ... mas vou esperar até você tentar isso.


Já é idêntico: i.imgur.com/zhTBS.png, embora você note que, mesmo comparando nossas capturas de tela, as fontes padrão são muito irregulares na minha máquina.
hughes

OK ... quem faz sua placa de vídeo?
Wizlog 13/07/11

Além disso ... vá para google.com/webfonts são todos tão bagunçados? Eu sei que você foi ao typekit.com ... mas isso pode ser diferente. Tente olhar através dos filtros diferentes e ver se o problema se aplica a todos eles (. Ex é apenas serif ou ...)
wizlog

3
Isso altera os tipos de letra (as "fontes"). Não tem nada a ver com a renderização da fonte .
Andres Riofrio

2

O Chrome não processa bem as fontes da Web no momento. Existem vários erros no rastreador de problemas para isso. Atribua uma estrela relevante a você para dar mais atenção.


2

Eu tive exatamente o mesmo problema, processando fontes da web em http://www.google.com/webfonts no Chrome. Tentei todas as sugestões sobre isso e alguns outros sites, e nenhum deles funcionou.

Eventualmente, comecei a inspecionar as propriedades CSS do texto afetado, que resultou na cor da fonte real que estava causando o problema. Um título dado color:#454545renderia mal, mas o mesmo título, dado o seguinte: color:#333funcionou bem. Graças a Deus pelas folhas de estilo específicas do agente do usuário!


2

No Windows XP, mudei a opção de anti-alias de "Padrão" para "Limpar tipo" em
Exibir → Propriedades → Aparência → Efeitos visuais.


2

O Chrome utiliza o valor clearType do sistema para fontes. A aparência melhor no Windows 7 explica isso. Em um Mac, o Anti-aliasing está ativado para todas as fontes acima do tamanho 8, suponho. Tente ativar ou alterar o clearType da sua máquina Windows

Atualização : parece que o Chrome 22 e superior ignoram as configurações do sistema paraclearType


1

Eu tive esse problema tão severamente no Windows XP SP3 que tornou o Chrome inutilizável para todos os efeitos. Percebi que havia instalado o Clear Type Tuning no Painel de controle e tentei desmarcar "Ativar fonte suavizada" na guia avançada. Depois de reiniciar o Chrome. estava tudo bem, mesmo depois de ativar a suavização de fonte novamente. Decidi marcar a caixa "Aplicar todas as configurações aos padrões para novos usuários e sistema".


1

Para mim, não era a configuração ClearType no Windows 10.1 x64, mas acabou sendo uma configuração no meu navegador Chrome chamada DirectWrite.

  1. Na sua barra de endereço no Chrome, digite: chrome://flags/#directwrite
  2. E ative o DirectWrite, o título dessas configurações diz Desativar DirectWrite e verifique se o botão abaixo mostra a palavra: Ativar

Isso resolveu o problema para mim.


0

Parece que a resposta longa e difícil é que você não pode. Existem muitas discussões e sugestões na ajuda do Chrome , mas não vejo nada que valha a pena sugerir.

A grande questão é como você está ficando tão ruim ?! Estou usando o Chrome para digitar nesta caixa ... Eu até ampliei um monte e não vejo nada como você. Se você ainda tiver dúvidas depois disso, explique sua configuração à comunidade.


0

Embora o Chrome seja "utilizável" para as fontes, ele parece fino e desbotado, onde renderiza linhas diagonais especialmente. O IE é muito melhor, mas o IE é um navegador mais lento e, portanto, o FireFox.

Eu acredito que isso é inerente ao código do chrome.

BTW, HackToHell, onde devo mudar a cor da renderização?

Eu vou tentar isso.


0

pressione a tecla windows + r e digite cttune.exe lá

O método alternativo é pressionar a tecla Windows, digite cleartype e selecione Adjust ClearType Text

e siga as instruções, se você ainda tiver problemas, tente alguns dos outros exemplos

isso funcionou para mim, você deve tentar os diferentes exemplos, é muito parecido com a calibração de contraste / brilho, mas para o texto

FYI: desabilitar a aceleração 2D pode ajudar o Chrome a jogar com a ferramenta de ajuste do Windows ClearType


0

Se você deseja que as fontes da web sejam legíveis enquanto o tipo de suavização / limpeza de fonte ainda está desativado, a solução é desativar as fontes da web no Google Chrome. Nesse caso, o navegador usará as fontes padrão do SO, renderizadas corretamente quando o tipo claro / suavização estiver desativado. Para fazer isso, passe a /disable-remote-fontssinalização para chrome.exe. Clique com o botão direito do mouse no atalho do Google Chrome na área de trabalho, selecione Propriedades, vá para a guia Atalho e defina Destino como:

"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" /disable-remote-fonts

Pode haver um problema com as fontes da Web sendo desativadas. Se o site estiver usando ícones de fontes da Web, eles não serão exibidos.

O problema correspondente no rastreador Chromium:

"Configuração ClearType em todo o sistema não respeitada para fontes da Web" https://code.google.com/p/chromium/issues/detail?id=319429


0

Vá para chrome://flags/(ou about:flags) e Desative a opção Substituir lista de renderização de software .

A tela 2D acelerada também deve ser desativada.

Essa combinação me ajudou.


-1

Vá para chrome: // flags / e defina "Antialiasing de texto no LCD" para ativado. Reinicie o navegador.

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.