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 font I put, it always gets low quality,
Isthereanywaytoreducethese"noises"?
There is a text-rendering property in css:
body {
background: url('imagens/capa.png');
font-family: "Avantgarde", "TeX Gyre Adventor", "URW Gothic L", sans-serif;
text-rendering: optimizeLegibility !important;
}
If you decide to leave comments if it helped you.
See more at this link: link
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>Techniques already mentioned and known.
You can put a very soft%%, just to make a Smooth effect on the font. See below in the case I put in the 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 text-shadow for all Browsers
-webkit-text-stroke: 0.45px rgba(255, 255, 255, 0.1);
Reference source: link
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 rendering speed and geometric accuracy. This property enables kerning and optional ligatures.
font-smoothing (Non-standard) : Applies anti-aliasing to font outline
Source for you to search: link
Font-smoothing: link