Je veux utiliser une police de pixels sur le Web. Je l'incluant à l'aide de @ font face-face, mais tous les navigateurs appliquent anti-aliasing à la police. Je n'arrive pas à trouver une règle de la CSS pour le désactiver, peut-on penser à une autre méthode de désactivation de l'anti-aliasing?
6 Réponses :
Je ne pense pas que CSS a une option d'anti-aliasing. Essayez Cufon à la place: https://github.com/sorccu/cufon/wiki/about
C'est assez facile à utiliser et il rendra très bien vos polices de pixels. Vous pourriez également être intéressé par Shaun Inman's PXFon: http://shauninman.com/archive/2009/04/17/pxr_cufon_pxfon
Cela rend gentiment gentiment, mais le texte met en évidence est horrible et il devient très évident que ce n'est pas une police normale. Voir un exemple de celui-ci ici: pixel-portraits.com/pxfon
Le rendu des polices est effectué par le système d'exploitation et le navigateur, donc, à ce moment-là, je pense qu'il y a peu de choses que vous pouvez faire avec CSS. Il peut y avoir des règles de la CSS proposées dans la discussion (j'ai vu mentionner «Font-lisse» ou quelque chose comme ça), mais rien dans CSS3, autant que je sache, et sans aucun doute rien dans CSS2.
Merci, à peu près ce que j'ai pensé.
La plupart des polices de pixels ne fonctionneront tout simplement pas correctement si vous les utilisez sur une taille multiple 8PT (8, 16, 24, etc.)
Si vous travaillez sur de mauvaises tailles de polices, vous finirez par obtenir des caractères aliasés / brumeux.
Vérifiez cela ...
http://www.fontsquirrel.com/font/list/style/pixel < / a>
... cela peut aider;)
Cette question est ancienne, alors je voulais juste donner une mise à jour.
basé sur Caniuse.com , il y a une propriété CSS pour cela, mais a été supprimée des traites de spécification CSS3. Donc, ce n'est pas une solution standard. Certains navigateurs WebKit, Firefox et Opera le soutiennent, mais il est incompatible. Cela fonctionne surtment pour les utilisateurs de bureau et de Mac OS P>
-webkit-font-smoothing: none || antialiased || subpixel-antialiased -moz-osx-font-smoothing: auto || inherit || unset || grayscale font-smoothing: auto || inherit || unset || grayscale
Voici la page de documentation de Font-Smooth: développeur.mozilla. org / fr-nous / docs / Web / CSS / Font-lisse (inclut un tableau de compatibilité). Au 10 août, 2020 UTC, j'ai testé désactiver l'anti-aliasing dans le texte HTML avec le logiciel Mozilla / 5.0 (Linux; Android 4.4.3; Kfthwi) Applewebkit / 537.36 (KHTML, comme Gecko) Silk / 81.2.16 Like Chrome / 81.0.4044.138 Safari / 537.36 chez HTMLEDIT.SQuareFree.com - Malheureusement, cela n'a pas fonctionné (le texte avait toujours une antialiasing).
J'ai eu un problème similaire aujourd'hui et il semble que, bien que même Font-lisse em> ne fonctionne pas dans Contemporain Firefox * Ajout du filtre: filter: contrast(1);
Oui, c'est possible.
Je cherchais cela aussi. Et j'ai finalement trouvé une solution sur un autre thread Stackoverflow ( Comment obtenir des "cris" pour SVG Text? ) Pour désactiver le lissage du texte (désactiver Anti-alias) pour SVG, mais cette solution fonctionne également pour des éléments HTML réguliers.
L'astuce utilise à l'aide d'un filtre SVG, que vous pouvez alors Ajouter à n'importe quel élément HTML pour faire quelque chose de croustillant.