Comment appliquer des effets anti-alias de police en CSS?

Comment pouvons-nous appliquer l’anti-crénelage des fonts de type Photoshop, telles que des images nettes, nettes, fortes et fluides en CSS?

Sont-ils pris en charge par tous les navigateurs?

voila monsieur 🙂

1

.myElement{ -webkit-font-smoothing: antialiased; } 

2

 .myElement{ text-shadow: rgba(0,0,0,.01) 0 0 1px; } 

Réponse courte: Vous ne pouvez pas.

CSS n’a pas de techniques qui affectent le rendu des fonts dans le navigateur; seul le système peut le faire.

De toute évidence, la netteté du texte peut facilement être obtenue avec des écrans très compacts, mais si vous utilisez un PC normal, cela sera difficile à réaliser.

Il y a des fonts plus récentes qui sont lisses mais au prix d’une certaine confusion (regardez par exemple la plupart des fonts d’Adobe). Cependant, vous pouvez également trouver des fonts fluides mais floues sur Google Fonts .

Il existe de nouvelles techniques CSS3 pour le rendu des fonts et les effets de texte, même si la cohérence, les performances et la fiabilité de ces techniques varient tellement au point que vous ne devriez généralement pas trop vous y fier.

Fonctionne le mieux Si vous souhaitez l’utiliser à l’échelle du site, sans avoir à append cette syntaxe à chaque classe ou ID, ajoutez le code CSS suivant à votre corps CSS:

 body { -webkit-font-smoothing: antialiased; text-shadow: 1px 1px 1px rgba(0,0,0,0.004); background: url('./images/background.png'); text-align: left; margin: auto; }