Comment appliquer les effets anti-alias dans CSS? [dupliquer]

cette question a déjà une réponse ici:

  • Forcer l'anti-aliasing à l'aide de css: Est-ce un mythe? 16 réponses

Comment Pouvons-nous appliquer une police de type Photoshop anti-aliasing telle que crisp, sharp, strong, smooth dans CSS?

sont-ils pris en charge par tous les navigateurs?

47
demandé sur putvande 2013-07-25 21:24:30

3 réponses

ici, vous allez Sir :-)

1

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

2

.myElement{
    text-shadow: rgba(0,0,0,.01) 0 0 1px;
}
91
répondu Gildas.Tambo 2018-03-25 01:53:39

brève réponse: 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 denses en pixels, mais si vous utilisez un PC normal qui va être difficile à atteindre.

Il ya quelques nouvelles polices qui sont lisses, mais au sacrifice de celui-ci semble un peu flou (regardez la plupart des polices de Adobe, exemple.) Vous pouvez également trouver quelques lisse-mais-floue-par-la conception de polices Google Polices , cependant.

il y a quelques nouvelles techniques CSS3 pour le rendu de police et les effets de texte bien que la cohérence, la performance et la fiabilité de ces techniques varient tellement largement au point où vous ne devriez généralement pas trop compter sur eux.

7
répondu Jace Cotton 2014-09-05 14:25:11

fonctionne le mieux. Si vous voulez l'utiliser sur le site, sans avoir à ajouter cette syntaxe à chaque classe ou ID, ajoutez les CSS suivants à 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;

}
6
répondu user3267537 2014-02-03 21:06:33