Suavização e suavização de fontes da Web no Firefox e Opera

Tenho fontes da Web personalizadas usadas em meu site. Para estilizar minha saída de renderização, usei o seguinte código:

//-webkit-text-stroke-width: .05px;
//-webkit-text-stroke-color: white;
-webkit-font-smoothing: antialiased;

Isso funciona bem no Safari e no Chrome (as bordas são mais nítidas e as linhas são mais finas). Existe alguma maneira de implementar o mesmo estilo no Firefox e Opera?

Como o Opera é alimentado por Blink desde a versão 15.0 -webkit-font-smoothing: antialiased, também funciona no Opera.

O Firefox finalmente adicionou uma propriedade para habilitar suavização de escala de cinza. Depois de uma longa discussão estará disponível na Versão 25 com outra sintaxe, que aponta que esta propriedade só funciona no OS X.

-moz-osx-font-smoothing: grayscale;

Isso deve corrigir fontes de ícone borradas ou texto claro em fundos escuros.

.font-smoothing {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

Você pode ler meu post sobre renderização de fontes no OSX, que inclui um mixin Sass para lidar com as duas propriedades.

Bem, o Firefox não suporta algo assim.

Na página de referência do Mozilla especifica font-smoothcomo a propriedade CSS controla a aplicação de anti-aliasing quando as fontes são renderizadas, mas esta propriedade foi removida desta especificação e não está atualmente na faixa padrão.

Esta propriedade só é compatível com navegadores Webkit.

Se você deseja uma alternativa, pode verificar isto:

• Suavização de sombra de texto | Philip Renich, Websites - blog
• cufón - fontes para as pessoas

Caso: texto claro com fonte da web irregular em fundo escuro Firefox (v35) / Windows
Exemplo: Google Web Font Ruda

Solução surpreendente -
adicionar a seguinte propriedade aos seletores aplicados:

selector {
    text-shadow: 0 0 0;
}

Na verdade, o resultado é o mesmo apenas com text-shadow: 0 0; , mas eu gosto de definir explicitamente o raio de desfoque.

Não é uma solução universal, mas pode ajudar em alguns casos. Além disso, não experimentei (também não testei completamente) impactos negativos no desempenho desta solução até agora.

Depois de me deparar com o problema, descobri que meu arquivo WOFF não foi feito corretamente, enviei um novo TTF para o FontSquirrel que me deu um WOFF adequado que funcionou sem problemas no Firefox sem adicionar CSS extra a ele.

Encontrei a solução com este link: http://pixelsvsbytes.com/blog/2013/02/nice-web-fonts-for-every-browser/

Método passo a passo:

• envie sua fonte para um WebFontGenerator e obtenha o zip
• encontre a fonte TTF no arquivo Zip
• então, no linux, faça este comando (ou instale por apt-get install ttfautohint):
  ttfautohint --strong-stem-width=g neosansstd-black.ttf neosansstd-black.changed.ttf
• então, mais um, envie o novo arquivo TTF (neosansstd-black.changed.ttf) no WebFontGenerator
• você obtém um Zip perfeito com todas as suas fontes da web!

Espero que isso ajude.

... na tag do corpo e no conteúdo e na fonte parece melhor em geral ...

body, html {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
text-rendering: optimizeLegibility;
text-rendering: geometricPrecision;
font-smooth: always;

font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
-webkit-font-smoothing: antialiased;
-webkit-font-smoothing: subpixel-antialiased;
}


#content {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;

}

Quando a cor do texto é escura, no Safari e no Chrome, tenho melhores resultados com a propriedade css do traço de texto.

-webkit-text-stroke: 0.5px #000;

Adicionando

font-weight: normal;

Para o seu @ font-face, as fontes irão corrigir o negrito no Firefox.