Source with low html quality

Question

body{
    background: url('imagens/capa.png');
    font-family: "Avantgarde", "TeX Gyre Adventor", "URW Gothic L", sans-serif;
}

.texto-capa{
    text-align: center;
    color:white;
    display: table-cell;
    vertical-align:middle;
}

I have these settings, however, regardless of the source I put, it always stays with low quality, depxealized, as image:

Is there any way to reduce these "noises"?

Answer 1

Exists in css the property text-Rendering:

body {
   background: url('imagens/capa.png');
   font-family: "Avantgarde", "TeX Gyre Adventor", "URW Gothic L", sans-serif;
   text-rendering: optimizeLegibility !important;
     }

If resolve leaves in the comments if it helped you.

See more on this link: https://developer.mozilla.org/en-US/docs/Web/CSS/text-rendering

Answer 2

You can try some new CSS3 techniques and classes

First I’ll start with the technique of Filter:Blur(), because no one has mentioned it yet. (Doesn’t work on IE just Edge)

Here are the results with the Filter. It seems that some font-familyhas a better or worse result, it is up to you to evaluate whether it is the best technique.

Look at the "and" in the "t" and in the "u" lowercase as the result is clear

Another example with and without the filter in a source with poor rendering. The filter is on the limit, there goes the common sense.

Filter styles need to hardware acceleration, but it seems that even with the Blur accentuated consumes very little resource at render time and FPS is almost equal, in Chrome at least...

So you want to run some tests here’s the Snipper from the test I did with filter: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>

---

Techniques already cited and known.

You can put a text-shadow very smooth, just to make a smooth effect on the font. See below in case I put in white color that is the color of your font.

text-shadow: 1px 1px 1px rgba(255,255,255,0.004);

The same principle can be used with -webkit-text-stroke for all Browsers

-webkit-text-stroke: 0.45px rgba(255, 255, 255, 0.1);

Reference source: https://caniuse.com/#search=-Webkit-text-Stroke

You can also use some CSS classes

text-rendering: optimizeLegibility;  /* não funciona no IE e Edge */
-webkit-font-smoothing: antialiased; /* apenas para Mac OS X/macOS */
-moz-osx-font-smoothing: grayscale; /* apenas para Mac OS X/macOS */
font-smooth: always; /* Non-standard */

optimizeLegibility: The browser prioritizes readability over render speed and geometric accuracy. This property enables optional kerning and ligatures.

font-Smoothing (Non-standard): Apply an anti-aliasing to the font border

Source for you to do a search: https://developer.mozilla.org/en-US/docs/Web/CSS/text-rendering

Font-Smoothing: https://developer.mozilla.org/en-US/docs/Web/CSS/font-smooth