web-dev-qa-db-fra.com

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

Comment pouvons-nous appliquer un anti-aliasing de type Photoshop comme un style net, net, puissant et fluide?

Sont-ils supportés par tous les navigateurs?

htmlcsscss3antialiasing
48
Mehar

voilà monsieur :-)

1

.myElement{
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

2

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

Réponse courte: vous ne pouvez pas.

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

Évidemment, la netteté du texte peut facilement être obtenue avec des écrans très denses en pixels, mais si vous utilisez un PC normal, ce sera difficile à obtenir.

Certaines polices les plus récentes sont lisses mais semblent sacrifier un peu flou (regardez la plupart des polices d'Adobe, par exemple). Vous pouvez également trouver des polices lisses, mais floues, par conception à l'adresse Google Fonts , cependant.

Il existe de nouvelles techniques CSS3 pour le rendu des polices et les effets de texte, bien que la cohérence, les performances et la fiabilité de ces techniques varient tellement que vous ne devriez généralement pas trop les utiliser.

8
Jace Cotton

Fonctionne le mieux. Si vous souhaitez utiliser l'ensemble du site, sans avoir à ajouter cette syntaxe à chaque classe ou à chaque 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;

}
7
user3267537