Como posso melhorar a aparência da fonte no Google Chrome?

Question

.

Àesquerdaestáofirefox4,àdireitaestáochrome12.ExisteumamaneiradefazeroChromerenderizarfontesmaisbonitas?

Aimagemacimafoitiradanowindowsxp.Abaixoestáoutroexemplodowindows7.

    

Answer 1

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, já que eles não possuem dicas monocromáticas (por razões de tamanho, entre outras coisas). Eu costumava ver isso como "o IE renderiza melhor o texto", porque ignora as configurações ClearType no nível do sistema operacional e as ativa por padrão.

    

Answer 2

Todas essas respostas estão erradas! Este é um grande erro no Google Chrome, por favor, veja o relatório de bug oficial / thread, incluindo muitas imagens aqui: Relatório oficial de erros no Chrome Code

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

-webkit-text-stroke: 1px

Adição do Dr. John: Eu encontrei uma sugestão de que html { -webkit-text-stroke: 0.25px} funcionaria bem - encontrei aqui link

    

Answer 3

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

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

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

3. Clique na guia "Aparência" localizada na parte superior da nova janela.

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

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

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

7. Clique em Aplicar & Abra novamente o seu navegador Google Chrome.

A partir de agora, o Chrome irá tornar as suas fontes suavemente anti-alias para um efeito suave.

    

Answer 4

Coloque o arquivo SVG mais alto na regra css font-face, 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;
}

Em vez 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 do FontSpring
Exemplos do Adtrak

    

Answer 5

Você tem aceleração de GPU ativada no Google Chrome? Digite about:flags e procure por GPU Accelerated Canvas 2D , desative-a se habilitado. Fontes em alguns sites parecem realmente irregulares quando eu naveguei com a aceleração ativada.

    

Answer 6

No Google Chrome, clique na chave inglesa > Opções > Sob o capô > [ao lado do conteúdo da web], clique em Personalizar fontes.

Altere suas configurações para que sua página pareça com a minha

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

Se isso não resolver, pode haver mais uma coisa ... mas esperarei até você tentar isso.

    

Answer 7

O Chrome não processa bem as fontes da Web no momento. Existem vários bugs em seu rastreador de problemas para isso. Por favor, estrela qualquer relevante para você para dar-lhes mais atenção.

    

Answer 8

Eu tinha exatamente o mesmo problema, disponibilizando webfonts do link no Chrome. Eu tentei todas as sugestões sobre isso e um par de outros sites e nenhum deles funcionou.

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

    

Answer 9

No Windows XP, alterei a opção anti-alias de "Default" para "Clear Type" no
Exibir → Propriedades → Aparência → Efeitos visuais.

    

Answer 10

O Chrome usa o valor clearType do sistema para fontes. Olhando melhor no Windows 7 explica isso. Em um Mac, o anti-aliasing está habilitado 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 até ignorar as configurações do sistema para clearType

    

Answer 11

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

    

Answer 12

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ços no tipo Chrome: 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.

    

Answer 13

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 Eu não vejo nada que valha a pena sugerir.

A grande questão é como você está fazendo isso parecer tão ruim ?! Eu estou usando o Chrome para digitar nesta caixa ... Eu até ampliei um monte e não vejo nada parecido com você. Se você ainda tiver dúvidas depois disso, você deve explicar sua configuração para a comunidade.

    

Answer 14

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

Acredito que isso seja inerente ao código do chrome.

BTW, HackToHell, onde devo ir para alterar a cor de renderização?

Vou tentar isso.

    

Answer 15

pressione a tecla do Windows + r em seguida, digite cttune.exe lá

método alternativo é pressione a tecla Windows e digite cleartype e selecione Ajustar texto do ClearType

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

isso funcionou para mim, você tem que experimentar os diferentes exemplos, é muito parecido com a calibragem de contraste / brilho, mas para texto em vez

FYI: desativar a aceleração de 2d pode ajudar a fazer com que o chrome seja executado com a ferramenta de ajuste do tipo clearty do windows

    

Answer 16

Se você quiser que as fontes da Web sejam legíveis e ainda tenha a suavização / cleartype de fontes desativada, a solução é desativar as fontes da Web no Google Chrome. Nesse caso, o navegador usará fontes padrão do sistema operacional que são processadas corretamente quando o tipo claro / suavizado estiver desabilitado. Para fazer isso, passe a bandeira /disable-remote-fonts para chrome.exe. Clique no atalho do Google Chrome na área de trabalho, selecione Propriedades, acesse a guia Atalho e defina Alvo para:

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

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

O problema correspondente no rastreador do Chromium:

"Configuração ClearType em todo o sistema não é respeitada pelas fontes da web" link

    

Answer 17

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

Tela 2D acelerada também deve ser desativada.

Essa combinação me ajudou.

    

Answer 18

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