-webkit-font-smoothing: antialiased;
is actually a technique created for the Safari browser for retina screens on Mac computers (OS X system)
So much so that the version of this property for firefox is -moz-osx-font-smoothing: grayscale;
( source: link )
Related: Understanding the Traditional Antialias Difference for ClearType
There is no standardized property for this specifically, but according to this repository there are some techniques you can try ( > without warranty ):
Property font-smooth: always
:
Not yet supported by any browser, this property is what will basically replace -webkit-font-smoothing
and -moz-osx-font-smoothing
.examplo {
font-smooth: always;
font-size: 24pt;
}
<div class="examplo">
Olá, Mundo! Hello World!
</div>
Property text-rendering
This property may come in handy, but you can also gauge, as the use of it is not good for what you want, however the property values are:
-
text-rendering: optimizeSpeed;
-
text-rendering: optimizeLegibility;
-
text-rendering: geometricPrecision;
Property transform: rotate()
:
This causes a "tilt" in CSS that "fits the font"
.examplo {
transform: rotate(-0.0000000001deg);
font-size: 24pt;
}
<div class="examplo">
Olá, Mundo! Hello World!
</div>
Property text-shadow
:
Depending on the tests for Windows specifically this was the one that had the best result, it is necessary to adjust the same color and / or size that the font uses
.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>
The group / person holding the repository has created an example to make it easier with jQuery, but this will force jQuery only for an "effect", of course jQuery will be fine, but otherwise it is best to avoid it, then rephrase it in a simple example:
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) {
return;
}
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)";
}
To apply to an element just use, example applied to all sub-titles:
var h1 = document.getElementsByTagName("h2");
for (var i = h1.length - 1; i >= 0; i--) {
smoothByShadow(h1[i]);
}
If you do not have the desired effect you may have to adjust the font size:
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) {
return;
}
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)";
}