How to soften the font with CSS in Chrome?

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

In some cases when this happens, I resolve with this:

   body {   
        /* CSS3*/
        -webkit-text-size-adjust: none;
        -webkit-font-smoothing: antialiased;
    }

The truth is the Google folks have removed support from -webkit-font-smoothing: antialiased; just to annoy programmers. =(

They should feel that this impairs browser performance.

In IE and Firefox fonts look better as they use a font-rendering engine "out", while Chrome uses the one provided by Windows, called ClearType.

The way is to settle for gambiarras like this:

body { 
  -webkit-text-stroke-color: #333;
  -webkit-text-stroke: 0.2px;
}

But since nothing stays 100%, I'd rather give up and leave the same pattern.

You can try some new CSS3 techniques and classes

First I'll start with the Filter:Blur() technique, because no one has mentioned it yet. (Does not work in IE just Edge)

Here are the results with the Filter. It seems that some font-family has a better or worse result, it's up to you to evaluate if it's the best technique.

Noticethe"and" in "" and "

Anotherexamplewithandwithoutthefilterinapoorlyrenderedsource.Thefilterisinthelimit,theregoesthecommonsense.

Filteringstylesneedhardwareacceleration,butitseemsthatevenwithaccentedBlurconsumesverylittleappealatrendertime,andFPSisprettymuchthesame,inChromeatleast...

SoyouwanttodosometestshereisthetestsnipperImadewithfilter:blur()

h1 {
    font-size: 4.25rem;
    font-family: cursive;
    filter: blur(0.35px);
}
h1:nth-child(1) {
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}
h1:nth-child(2){
    font-family: 'Times New Roman', Times, serif;
}
h1:nth-child(3){
    font-family: Courier New, Courier, monospace;
}

<h1>Texto Blur1</h1>
<h1>Texto Blur2</h1>
<h1>Texto Blur3</h1>
<h1>Texto Blur4</h1>