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)";
}
}