Propiedad de css que hacen que tu tipografía se vea mejor
La verdad sea dicha
Bueno, no es que se vea mejor mejor, la idea es que los vectores sean más fieles a como fueron creados originalmente, el efecto visual que dan es que sen más delgadas, pero en algunos casos algunas tipografías (sobre todo las thin) sin esta propiedad pierden completamente la gracia
El css de Font-smoothing
-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
Font-smoothing en funcionamiento
SIN font smoothing
Lorem Ipsum dolor Est
Lorem Ipsum dolor Est
Lorem Ipsum dolor Est
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum congue quis lacus in scelerisque. Nullam facilisis nibh a magna aliquet, vitae tempor odio dignissim. Sed non dolor dapibus, vestibulum sem vitae, sollicitudin diam. Nulla elit quam, rhoncus at arcu eget, pretium pulvinar est.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum congue quis lacus in scelerisque. Nullam facilisis nibh a magna aliquet, vitae tempor odio dignissim. Sed non dolor dapibus, vestibulum sem vitae, sollicitudin diam. Nulla elit quam, rhoncus at arcu eget, pretium pulvinar est.
Con Font smoothing
Lorem Ipsum dolor Est
Lorem Ipsum dolor Est
Lorem Ipsum dolor Est
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum congue quis lacus in scelerisque. Nullam facilisis nibh a magna aliquet, vitae tempor odio dignissim. Sed non dolor dapibus, vestibulum sem vitae, sollicitudin diam. Nulla elit quam, rhoncus at arcu eget, pretium pulvinar est.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum congue quis lacus in scelerisque. Nullam facilisis nibh a magna aliquet, vitae tempor odio dignissim. Sed non dolor dapibus, vestibulum sem vitae, sollicitudin diam. Nulla elit quam, rhoncus at arcu eget, pretium pulvinar est.
El único problema que tiene es que es compatible con pocos navegadores, pero bueno, así es la vida… supongo:
Can I Use font-smooth? Data on support for the font-smooth feature across the major browsers from caniuse.com.
Tags: CSS