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


112

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?


5
Seria uma boa ideia parar de fazer isso e ler o motivo aqui: usabilidadepost.com/2012/11/05/stop-fixing-font-smoothing
fregante

20
^ esta é uma ampla generalização e não há problema em usar suavização de fonte. É o problema de renderização que é o problema, não o comportamento do designer. Quando você projeta um layout e a fonte parece estar em semi-negrito devido ao mecanismo de renderização, é o mecanismo que precisa ser consertado, não o layout.
Dylan,

1
Não é uma generalização totalmente ampla. O artigo diz que a renderização de subpixel foi principalmente destinada a tornar o texto claro em fundos escuros mais legível (ou seja, acessível), e tornar uma definição CSS ampla como body { -webkit-font-smoothing: antialiased; }é muito pesada.
Matt Scheurich

3
Minhas fontes da web que são escuras em fundos claros também estão ficando em "negrito falso". Eu digo "suavizado" em todos os lugares.
Jason T Featheringham

5
A forma como uma página é exibida é responsabilidade do designer, incluindo todos os atributos tipográficos. É sua responsabilidade garantir usabilidade, consistência e apelo em uma ampla gama de plataformas. O acesso aos atributos de suavização de fonte via CSS permite maior controle. Como qualquer coisa, pode ser mal utilizado nas mãos erradas. Mas divulgar a filosofia pessoal em vez de responder à pergunta não ajuda.
Beejor

Respostas:


193

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.


6
Por que apenas OSX ??
Yassir Ennazk

7
O Windows e o Linux usam algoritmos de renderização para fontes diferentes do OSX.
Maximilian Hoffmann

15

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:


2
Bem, o problema que tenho é que minhas fontes parecem "em negrito" e inchadas no firefox e na ópera. Com -webkit-font-smoothing:antialiased;eu poderia consertar no Safari e no Chrome. Adoraria encontrar qualquer "hack" para tornar minhas fontes um pouco mais leves no Firefox também. Pensei em aplicar um branco text-shadowa ela apenas no moz, mas não há como aplicar uma sombra de texto "inserida" que tornaria a fonte mais clara.
matt

1
@matt Você pode tentar alguns conselhos CSS nesta questão: stackoverflow.com/questions/761778/… Talvez você encontre alguma alternativa CSS.
Jonathan Naguin

11

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.


Não faz nada para ajudar
vsync

isso causará fontes mais ousadas no cromo com base na fonte
Ben Sewards,

1
@BenSewards Você forneceria uma fonte na qual obtivesse uma renderização de fonte mais ousada? Ou talvez até mesmo um CodePen? Desde já, obrigado.
Volker E.

1
@VolkerE. obrigado pela ótima solução. Eu tenho o mesmo problema irritante com a fonte do código-fonte Pro em um cabeçalho fixo. Quando eu rolo a fonte fica muito pequena e com sua sombra de texto a fonte não causa problemas.
Evolutio

No cromo atual (58.0.3029.110), o texto "suave" parece realmente horrível. (o texto "irregular" é um pouco melhor)
RecursiveExceptionException

7

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.


é no windows?
Vignesh de

5

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.


Fez um ótimo trabalho ao corrigir irregularidades de fonte durante as transições de css (embora não o tenha removido completamente). Usei o gerador FontSquirrel com opção TTFAutohint
Andrey

Usei Fontie para regenerar meus arquivos WOFF, WOFF2, EOT e SVG com autohint para Windows habilitado.
Dominique

4

... 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;

}

2
Sinto muito ... o que é "reinschreiben"? A maioria de nós não fala alemão, então seria bom se você fizesse toda a sua postagem em inglês.
rayryeng

3
Oh, por favor, peço desculpas por ter traduzido com o Google e, de alguma forma, a palavra errada desde que escorregou :)
user3634787

3

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;

A pergunta é sobre Firefox e Opera. então esta resposta não tem nada a ver com a pergunta
vsync

-4

Adicionando

font-weight: normal;

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


7
font-weight(sem surpresa) afeta a espessura da fonte, não a suavização da fonte. Adicioná-lo às declarações @ font-face causará confusão se o arquivo de fonte vinculado não for um arquivo de fonte de espessura normal.
Mike Meyer

@MikeMeyer Na verdade, concordo com o comentário do Aaron. Adicionando peso da fonte: normal para um include de fonte que é uma fonte "leve" parece adicionar confusão, mas deve apenas confundir o desenvolvedor novato. Na verdade, é uma boa prática especificar um padrão de normal em minha experiência. Normal, neste caso, refere-se a "normal" para a fonte incluída e os caracteres que estão sendo usados ​​e não se destina a especificar informações sobre a própria face da fonte. Em muitos casos (especialmente em grandes plataformas) reduzirá a probabilidade de bugs provenientes da arquitetura ruim típica que você vê em torno dos estilos de fonte.
dudewad

Na verdade, o próprio nome da fonte deve denotar o peso da fonte por padrão ...!
dudewad

@dudewad que ótimo que você concorda, e sim, é uma “dica profissional” decente (embora bastante concisa) sobre font-weight. O fato é que OP não estava perguntando sobre font-weight- ele estava perguntando sobre o antialiasing . Esta é uma resposta correta para uma pergunta completamente diferente.
Mike Meyer

@MikeMeyer você está totalmente certo. Eu fico um pouco empolgado às vezes. ;)
dudewad
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.