Eu acho que a maioria dos desenvolvedores de front-end aceitou que as fontes no navegador, e especialmente aquelas nos cabeçalhos grandes, parecem muito diferentes do que vemos no Photoshop.

As fontes são um pouco mais finas, mais suaves e geralmente muito, muito melhores no PS. Nós não podemos realmente mudar a forma como as fontes são renderizadas no navegador, mas para algumas delas, podemos usar um truque CSS simples para obter uma qualidade parecida com o Photoshop. No WebKit, usaremos a -webkit-font-smoothingpropriedade. O Firefox também implementou uma propriedade semelhante chamada -moz-osx-font-smoothing, e está disponível a partir da versão 25. Tente adicionar essas propriedades às tags de cabeçalho ou ao corpo inteiro:

-webkit-smoothing de fontes: antialiased; 
-moz-osx-font-smoothing: escala de cinza;

Vamos dar uma olhada na diferença dramática que isso faz no OSX:

Isso funcionará bem no Chrome, Safari e Firefox em um computador Macintosh. Se o seu texto é um pouco fino demais e embaçado nos navegadores WebKit (especialmente quando a transformação CSS é aplicada ao container), você pode tentar adicionar alguns -webkit-text-strokecom um valor menor que meio pixel. Algo em torno de 0,15-0,45 px deve funcionar. Para outros tamanhos ou cores de fontes, adicionar um thin similar text-shadowtambém pode funcionar. Finalmente, com algumas fontes, a propriedade antialiased pode ser um pouco dramática, então tentesubpixel-antialiased.

-webkit-text-stroke: 0.45px; 
// ou 
-webkit-text-stroke: 0,45 px rgba (0, 0, 0, 0,1); 
// ou 
text-shadow: #fff 0px 1px 1px;

Isso também melhorará o texto em navegadores móveis, mas, infelizmente, nenhum desses truques funcionará no Windows. Antes de usar essas técnicas em um projeto da vida real, tenha em mente que essas são apenas soluções alternativas e hacks. Eles não são soluções reais para a renderização pobre e inconsistente nos navegadores. Eles podem consertar ou alterar a maneira como seu texto é renderizado em uma nova versão, portanto, você teria que ficar de olho no projeto no futuro. Por outro lado, eu uso -webkit-font-smoothingem todos os meus projetos para tratar todos os meus visitantes do Mac com uma fonte bem renderizada.

---

Melhorando a Renderização no Windows

Infelizmente, temos a mesma inconsistência entre os sistemas operacionais, não apenas os navegadores. A primeira vez que pesquisei essa questão foi quando um dos meus projetos foi enviado de volta durante o controle de qualidade porque “a fonte parece um bloco e muito diferente do Photoshop.” O testador de QA até questionou se eu usava a fonte correta.

Eu fiz alguma pesquisa e descobriu-se que o Windows não aplica muito antialiasing ao texto na maioria dos casos. A boa notícia é que, nos navegadores mais recentes da Microsoft, as coisas realmente parecem muito boas. A renderização da fonte é muito, muito melhor em comparação com o Chrome e o Firefox.

Há um truque para corrigir o problema no Windows, e precisaremos usar o SVG para isso. As fontes SVG são específicas. Como se constata, não há realmente nenhuma maneira de controlar o antialiasing em fontes EOT, WOFF ou TTF. Mas o SVG é antialiased em ambos os sistemas operacionais por padrão!

Aqui está sua declaração regular de face de fonte:

@font -face { 
  font-family: 'MyWebFont'; 
  src: url ('webfont.eot'); 
  Formato src: url ('webfont.eot? #iefix') (formato 'embedded-opentype'), 
       url ('webfont.woff') formato ('woff'), 
       url ('webfont.ttf') ('truetype') ), formato 
       url ('webfont.svg # svgFontName') ('svg'); 
}

Como você pode ver, no final dessa declaração você tem a fonte SVG. A única coisa que temos que fazer para forçar o Windows a usá-lo é colocá-lo nessa lista.

Agora, isso parece bom, mas infelizmente há alguns problemas como esperado. Essas questões são as razões pelas quais decidi não usar esse método em meus projetos.

Em primeiro lugar, as fontes SVG são muito pesadas no tamanho do arquivo, então isso é algo a ser considerado. Eles podem ir até 200kb por arquivo. Esse tipo de fonte também não é tão flexível quanto outros, como o TTF, em termos de alteração de kerning ou espaçamento entre linhas. Por fim, o desempenho da renderização pode ser muito lento para o texto longo do corpo.

Assim, mesmo que isso não seja a abordagem ideal para a maioria dos sites, é definitivamente algo para se ter em mente. Por exemplo, essa solução pode ser ótima para projetos em que o site é construído em torno de um grande título de 80px que é o elemento mais importante do site (um site médio de 2016). Essa solução funcionaria se você quiser que o título fique com o máximo de navegadores e SO possível e não se importe com o tamanho de arquivo extra que ele adiciona. Ou talvez um dia você acabe criando um aplicativo da web para quiosque para Chrome em um PC com Windows.