web-dev-qa-db-fra.com

Existe-t-il un moyen de créer un espacement css entre lettres: 0,5 px?

J'ai rencontré le problème, il faut que les utilisateurs puissent facilement lire le texte. J'ai donc utilisé l'espacement des lettres de 1 px, mais ça a l'air moche, alors j'ai pensé que j'utiliserais un demi-pixel pour 0.5px, mais ne fonctionne pas, j'ai essayé d'utiliser les attributs em, mais je n'ai pas réussi la tâche.

Existe-t-il un moyen de réduire l’espacement des lettres d’un demi-pixel (solution inter-navigateur si possible)

31
Ilja

Ce bogue a été signalé en 2008 et est confirmé. Donc, si quelqu'un a envie de pirater Webkit, beaucoup de concepteurs seront heureux.

https://bugs.webkit.org/show_bug.cgi?id=20606

17
idFlood

L'espacement des lettres sous-pixel fonctionne bien sur FF, mais pas sur WebKit (au moins sur Windows). Voir ce cas de test:
http://jsfiddle.net/fZYqL/2/

Ce test montre également que ce n'est pas la valeur littérale de sous-pixel qui pose problème. L'utilisation de valeurs fractionnaires em entraînant moins de 1 pixel d'espacement des lettres n'est également pas respectée sur Webkit, mais fonctionne tout aussi bien sur Firefox.

Firefox versus Webkit

6
Phrogz

Ce bogue a été corrigé dans Chromium et atterri dans Chrome 30. Ainsi, les valeurs fractionnelles sont maintenant prises en charge par Firefox, Chrome et Opera.

5

@Zach Re: pixels fractionnaires. Bien qu'ils n'existent pas physiquement, ils sont simulés numériquement par des transparences et des changements de couleur. Un bon exemple sont les icônes et les empattements de type. Un examen attentif de ce qui semble être une ligne très fine montrera rapidement qu'elle est simulée en rendant la ligne avec une couleur plus claire qui trompe l'œil. Ainsi, même lorsqu'ils n'existent pas, les logiciels graphiques traitent correctement les pixels fractionnaires depuis longtemps. Il est dommage que les navigateurs Webkit n'en aient toujours pas.

Re: espacement des lettres fractionnaires. Il peut être spécifié et fonctionne correctement dans les navigateurs non-webkit (félicitations pour IE pour une fois). Dans les navigateurs Web, l'espacement des lettres est arrondi à l'entier le plus proche (je crois qu'il est arrondi au bas). Cet arrondissement se produit non seulement lorsque l'espacement des lettres est spécifié directement sous forme de pixel fractionnaire, mais également lorsqu'il est spécifié sous forme de pourcentage ou de valeur em et que le calcul final en pixels donne un pixel fractionnel. Très frustrant.

2
cockypup

Les tailles de sous-pixels sont légales, mais elles peuvent avoir des résultats imprévisibles sur tous les navigateurs. Des éléments tels que le texte essaient également de s’aligner sur des pixels entiers (comme le dit Phrogz), il est donc probable que les erreurs d’arrondi qui en résultent pourraient rendre les choses inégales.

1
Toomai

Les valeurs fractionnelles d'espacement des lettres sont prises en charge par Webkit, Firefox, Chrome et Opera depuis la fin de 2013.

Confirmé par CSS Tricks - https://css-tricks.com/almanac/properties/l/letter-spacing/

Et je viens de le tester. 

1
Joshua Dance