Como resolver este problema no Firefox em relação a fontes ?
Infelizmente no Chrome fica suave e no Firefox serrilhado.
-
Você não está sendo perfeccionista demais? Eu nem diria que o problema é do Firefox, e sim de resolução. Se abrir o site num smartphone, independente se no Chrome ou Firefox, a fonte ficará perfeita, já que a resolução seria "maior" no celular. O usuário final nem vai reparar nesse serrilhado. E outra, a forma de renderizar fonte no Chrome é diferente do Firefox, então não espere resultados iguais em tecnologias diferentes. "Anti-Aliasing" é uma gambi criada para compensar a baixa resolução. Abraço.– Rodrigo MelloCommented 1/04/2015 às 22:12
-
1O font-smooth, para funcionar, só para sistema operacional Mac OSX: caniuse.com/#feat=font-smooth– user44090Commented 12/04/2016 às 18:11
-
1Só pra constar, o "Antialiasing" tradicional é tecnologia obsoleta. Hoje se usa subpixel, considerando que praticamente todo mundo usa LCD. (chamado de Cleartype no windows). No screenshot está evidente que o Firefox está fazendo Antialias tradicional, e o Chrome subpixel, por isso a diferença. Pode ser um problema de configuração ou implementação. (pra quem não sabe o que é, basta ampliar a imagem da postagem e ver a diferença entre os dois lados. O Antialias é P&B, o cleartype é colorido)– Largato ♦Commented 12/04/2016 às 18:17
2 Respostas
Entendendo a diferença do antialias tradicional para o ClearType
Veja sua imagem ampliada:
Note que a imagem da direita tem pixels coloridos. Como o LCD não é formado por pixels de todas as cores, mas sim pequenos retângulos vermelhos, verde e azuis um do lado do outro, esta diferença de posição é usada para simular mais pixels horizontais (a maior parte dos LCDs para monitores é organizada horizontalmente).
O Antialias, por sua vez, faz apenas uma interpolação de pixel inteiro, tendo 3 vezes menos resolução que ClearType (entretanto, não fica com artefatos coloridos nas letras).
Habilitando ClearType no FireFox:
O FireFox por padrão usa Antialias, em vez do ClearType (subpixel rendering).
Esta extensão permite você habilitar o recurso:
https://addons.mozilla.org/en-US/firefox/addon/anti-aliasing-tuner/
Se preferir, pode digitar about:config
no campo de endereços e configurar manualmente as opções de ClearType, que fazem parte deste grupo:
gfx.font_rendering.cleartype_params
Porém, está sujeito a bagunçar mais o navegador do que resolver o problema.
É comum, que alguns browsers não exibam a fonte com anti-aliasing.
Conheço 3 alternativas com CSS3. Declarações:
transform: rotate (-0.0000000001deg);
text-shadow: 0 0 1px rgba(0,0,0,0.3);
font-smooth: always;
Fonte (Em inglês): https://gist.github.com/dalethedeveloper/1846552