The -webkit-font-smoothing: antialiased;
actually is a technique created for browser Safari 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: https://developer.mozilla.org/en-US/docs/Web/CSS/font-smooth)
Related: Understanding the difference from traditional Antialias to Cleartype
There is no standardized property for this specifically, but according to this repository https://gist.github.com/dalethedeveloper/1846552 there are some techniques you can try (unsecured):
Estate font-smooth: always
:
Still not supporting by any browser, this property is what will basically replace the -webkit-font-smoothing
and -moz-osx-font-smoothing
.examplo {
font-smooth: always;
font-size: 24pt;
}
<div class="examplo">
Olá, Mundo! Hello World!
</div>
Estate text-rendering
This property may come to help, but it can also affect, since the use of it is not well for what you want, yet property values are:
text-rendering: optimizeSpeed;
text-rendering: optimizeLegibility;
text-rendering: geometricPrecision;
Estate transform: rotate()
:
This causes a "tilt" in the CSS that "adjusts the font"
.examplo {
transform: rotate(-0.0000000001deg);
font-size: 24pt;
}
<div class="examplo">
Olá, Mundo! Hello World!
</div>
Estate text-shadow
:
According to the tests for Windows specifically this was the one that had 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 who maintains the repository has created an example to facilitate with jQuery, but this will require importing jQuery only for an "effect", of course jQuery is used will be fine, but otherwise it is better to avoid, so I remade 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) {
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 in an element just use, example applied in all subheadings:
var h1 = document.getElementsByTagName("h2");
for (var i = h1.length - 1; i >= 0; i--) {
smoothByShadow(h1[i]);
}
If it doesn’t have the desired effect you may need 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) {
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)";
}
}
Formerly had site that stated: This site is better viewed in browsers Internet Explorer version 6 and better viewed site in resolution 800x600 or higher with Flash plugin ... :)
– Tony
To reply in English is excellent.
– brasofilo
Tries to add -Webkit-Backface-visibility: Hidden;
– Tony
With -Webkit-Backface-visibility: Hidden; and -Webkit-font-Smoothing:antialiased; does not give, as indicated in the other stackoverflow, does not change at all, the solution I found was to use the -Webkit-text-Stroke: 0.6px; which I will have to set for each part that the font is a different size, but at least it improves
– braulio_holtz
actually with -Webkit-text-Stroke: 0.6px; doesn’t seem to be right
– braulio_holtz