5

Estou com um problema de fonte "craquelado" no Chrome, ou seja, parece que as pontas ficam pixelizadas.

Para ajudar, estou postando duas imagens

IE:

Imagem no IE

Chrome:

Imagem no Chrome

O meu CSS que chama a fonte:

@font-face
{
    font-family: "Helvetica-nw";
    src: url('../fonts/HelveticaNw_.eot');
    src: local('☺'),
    url('../fonts/HelveticaNw_.woff') format('woff'), url('../fonts/HelveticaNw_.ttf') format('truetype');
}

Alguem sabe como fazer com que minha fonte dê para visualizar corretamente no Chrome?

5
  • Antigamente tinha site que informava: Este site é melhor visualizado em navegadores Internet Explorer versão 6 e Site melhor visualizado em resolução 800x600 ou superior com plugin Flash ... :)
    – Tony
    Commented 12/03/2014 às 18:39
  • 3
    A resposta em Inglês é excelente.
    – brasofilo
    Commented 12/03/2014 às 18:39
  • Tenta acrescentar -webkit-backface-visibility: hidden;
    – Tony
    Commented 12/03/2014 às 18:43
  • 2
    Com -webkit-backface-visibility: hidden; e -webkit-font-smoothing:antialiased; não dá, como indicado no outro stackoverflow, não muda em nada, a solução que encontrei foi usar o -webkit-text-stroke: 0.6px; que vou ter que definir para cada parte que a fonte for um tamanho diferente, mas pelo menos melhora Commented 12/03/2014 às 18:54
  • na realidade com -webkit-text-stroke: 0.6px; não parece ter ficado certo Commented 12/03/2014 às 19:13

4 Respostas 4

4

O -webkit-font-smoothing: antialiased; na verdade é uma técnica criada para o navegador Safari para telas de retina em computadores Mac (sistema OS X)

Tanto que a versão desta propriedade para firefox é -moz-osx-font-smoothing: grayscale; (fonte: https://developer.mozilla.org/en-US/docs/Web/CSS/font-smooth)

Relacionado: Entendendo a diferença do antialias tradicional para o ClearType

Não existe nenhuma propriedade padronizada para isto especificamente, mas conforme este repositório https://gist.github.com/dalethedeveloper/1846552 existem algumas técnicas que pode tentar (sem garantia):

Propriedade font-smooth: always:

Ainda não é suportando por nenhum navegador, esta propriedade é o que basicamente vai substituir o -webkit-font-smoothing e -moz-osx-font-smoothing

.examplo {
    font-smooth: always;
    font-size: 24pt;
}
<div class="examplo">
 Olá, Mundo! Hello World!
</div>

Propriedade text-rendering

Esta propriedade talvez possa vir a ajudar, mas também pode afetar, já que o uso dela não é bem para o que deseja, todavia os valores da propriedade são:

  • text-rendering: optimizeSpeed;
  • text-rendering: optimizeLegibility;
  • text-rendering: geometricPrecision;

Propriedade transform: rotate():

Isto causa um "tilt" no CSS que "ajusta a fonte"

.examplo {
    transform: rotate(-0.0000000001deg);
    font-size: 24pt;
}
<div class="examplo">
 Olá, Mundo! Hello World!
</div>

Propriedade text-shadow:

Conforme os testes para Windows especificamente este foi o que teve melhor resultado, é necessário ajustar a mesma cor e/ou tamanho que a fonte usa

.examplo {
    text-shadow: 0 0 1px rgba(0,0,0,1);/*a cor deve ser a mesma da fonte, ajuste a opacidade como desejar*/
    font-size: 24pt;
}
<div class="examplo">
 Olá, Mundo! Hello World!
</div>

O grupo/pessoa que mantém o repositório criou uma exemplo para facilitar com jQuery, mas isto obrigará a importar jQuery somente para um "efeito", claro que se usa jQuery estará bem, mas caso contrário é melhor evitar, então refiz em um exemplo simples:

function getStyle(elem, prop)
{
    if (elem.currentStyle) { //IE8
        return elem.currentStyle[prop];
    } else if (window.getComputedStyle) {//Navegadores modernos
        return window.getComputedStyle(elem, null).getPropertyValue(prop);
    }
}

function smoothByShadow(elem)
{
    if (navigator.platform.indexOf('Win') == -1) {
        return;
    }

    var color = getStyle(elem, "color");

    if (color.search('rgb') != -1) {
        var rgba = color.match(/^rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*(\d+))?\)$/);

        elem.style.textShadow = "0 0 1px rgba(" + rgba[1] + "," + rgba[2] + "," + rgba[3] + ",1)";
    }
}

Para aplicar em um elemento basta usar, exemplo aplicado em todos sub-titulos:

var h1 = document.getElementsByTagName("h2");

for (var i = h1.length - 1; i >= 0; i--) {
    smoothByShadow(h1[i]);
}

Se não tiver o efeito desejado talvez tenha que ajustar o tamanho da fonte:

function smoothByShadow(elem)
{
    if (navigator.platform.indexOf('Win') == -1) {
        return;
    }

    var color = getStyle(elem, "color"),
        size = getStyle(elem, "font-size");

    if (color.search('rgb') != -1) {
        var rgba = color.match(/^rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*(\d+))?\)$/);

        var fsize = size.match(/(\d+)px/);

        elem.style.textShadow = "0 0 " + (fsize[1] / 15) + "px rgba(" + rgba[1] + "," + rgba[2] + "," + rgba[3] + ",0.3)";
    }
}
7
  • Infelizmente nenhuma dessas funcionou comigo, achei uma fonte boa e que parece não sofrer tanto com essas alterações de navegador, segue o link para quem quiser no futuro theleagueofmoveabletype.com/ostrich-sans
    – Leo Letto
    Commented 2/12/2016 às 3:43
  • Ainda estou desenvolvendo essa, da uma olhada como a fonte fica bluanime.com/v2/navegar
    – Leo Letto
    Commented 2/12/2016 às 16:10
  • Sim to tentando com windows, já testei em 1366 x 768 e 1920 x 1080 ... só no chrome a fonte fica zoada
    – Leo Letto
    Commented 2/12/2016 às 16:17
  • @LeoLetto chrome 64bit? Por favor informe se é LED ou LCD ou outro e informe o tamanho do monitor, tipo 17" (polegadas).
    – Syzoth
    Commented 2/12/2016 às 16:18
  • LED, 64bit, 17"
    – Leo Letto
    Commented 2/12/2016 às 16:21
1

Em alguns casos quando isso acontece, resolvo com isso:

   body {   
        /* CSS3*/
        -webkit-text-size-adjust: none;
        -webkit-font-smoothing: antialiased;
    }
2
  • Outra solução, sería você adicionar: text-shadow: 0.01em 0.01em 0.01em black; Não esqueça de substituir o black pela sua cor da fonte. Commented 12/03/2014 às 20:03
  • vou tentar novamente do text-shadow, só que tenho que configurar um valo diferente para cada tamanho... já o -webkit-font-smoothing: já tentei, mas não dá diferença, não sei se o Chrome retirou esse suporte Commented 12/03/2014 às 22:04
1

A verdade é o pessoal do Google retirou o suporte do -webkit-font-smoothing: antialiased; só pra irritar os programadores. =(

Eles devem achar que isso prejudica o desempenho do navegador.

No IE e Firefox as fontes ficam melhores pois eles usam um motor de renderização de fontes "por fora", enquanto o Chrome usa o fornecido pelo Windows, chamado ClearType.

O jeito é se contentar com gambiarras como essa:

body { 
  -webkit-text-stroke-color: #333;
  -webkit-text-stroke: 0.2px;
}

Mas como nada fica 100%, eu prefiro desistir e deixar o padrão mesmo.

2
  • 1
    A Google vai implementar o DirectWrite aparentemente, que corrige o problema, mas eu já passei com problemas de visualizações em algumas páginas com ele ativado, como o Facebook, não sei se mais alguem passou por isso depois de ativar ele no chrome://flags Commented 26/05/2014 às 14:52
  • @braulio_holtz Ativei o DirectWrite aqui há uma melhora perceptível. Possivelmente logo não precisaremos mais de gambiarras.
    – user7261
    Commented 26/05/2014 às 16:04
0

Você pode tentar algumas técnicas e classes novas do CSS3

Primeiro vou começar com a técnica do Filter:Blur(), pelo fato de ninguém ter mencionando ainda. (Não funciona no IE apenas Edge)

Aqui estão os resultados com o Filtro. Parece que algumas font-familytem um resultado melhor ou pior, cabe a você avaliar se é a melhor técnica.

inserir a descrição da imagem aqui

Repare no "e" no "t" e no "u" minúsculo como é nítido o resultado inserir a descrição da imagem aqui

Mais um exemplo com e sem o filtro em uma fonte com péssima renderização. O filter está no limite, ai vai do bom senso.

inserir a descrição da imagem aqui

Os estilos de filtro precisam de aceleração de hardwares, mas parece que mesmo com o Blur acentuado consome muito pouco recurso na hora do render e o FPS é praticamente igual, no Chrome pelo menos...

inserir a descrição da imagem aqui

Para que quiser fazer uns testes aqui está o Snipper do teste que fiz com filter:blur()

h1 {
    font-size: 4.25rem;
    font-family: cursive;
    filter: blur(0.35px);
}
h1:nth-child(1) {
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}
h1:nth-child(2){
    font-family: 'Times New Roman', Times, serif;
}
h1:nth-child(3){
    font-family: Courier New, Courier, monospace;
}
<h1>Texto Blur1</h1>
<h1>Texto Blur2</h1>
<h1>Texto Blur3</h1>
<h1>Texto Blur4</h1>


Técnicas já citadas e conhecidas.

Você pode colocar um text-shadow muito suave, apenas para fazer um efeito de Smooth na font. Veja abaixo no caso coloquei na cor branca que é a cor da sua font.

text-shadow: 1px 1px 1px rgba(255,255,255,0.004);

O mesmo principio pode ser usado com -webkit-text-stroke para todos os Browsers

-webkit-text-stroke: 0.45px rgba(255, 255, 255, 0.1);

Fonte de referência: https://caniuse.com/#search=-webkit-text-stroke

Também é possível usar algumas classes CSS

text-rendering: optimizeLegibility;  /* não funciona no IE e Edge */
-webkit-font-smoothing: antialiased; /* apenas para Mac OS X/macOS */
-moz-osx-font-smoothing: grayscale; /* apenas para Mac OS X/macOS */
font-smooth: always; /* Non-standard */

optimizeLegibility: O navegador prioriza legibilidade sobre a velocidade de renderização e precisão geométrica. Essa propriedade habilita o kerning e ligatures opcionais.

font-smoothing (Non-standard): Aplica um anti-aliasing no contorno da fonte

Fonte para vc dar uma pesquisada: https://developer.mozilla.org/pt-BR/docs/Web/CSS/text-rendering

Font-smoothing: https://developer.mozilla.org/en-US/docs/Web/CSS/font-smooth

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .