C'est une question très ancienne, mais je la revisite car j'ai eu ce problème dans une application que je développe et j'ai trouvé toutes les réponses voulues.
(Passer ce paragraphe pour le TL; DR ...)J'utilise la police Web Gotham de cloud.typography.com, et j'ai des boutons qui commencent creux (avec une bordure / texte blanc et un fond transparent) et acquièrent une couleur d'arrière-plan en survol. J'ai trouvé que certaines des couleurs d'arrière-plan que j'utilisais ne contrastaient pas bien avec le texte blanc, donc je voulais changer le texte en noir pour ces boutons, mais - que ce soit à cause d'une astuce visuelle ou des méthodes d'anti-aliasing courantes - sombre le texte sur fond clair semble toujours plus léger que le texte blanc sur fond sombre. J'ai trouvé que l'augmentation du poids de 400 à 500 pour le texte sombre maintenait presque exactement le même poids «visuel». Cependant, cela augmentait la largeur du bouton d'une toute petite quantité - une fraction de pixel - mais c'était suffisant pour que les boutons semblent légèrement «vaciller», ce dont je voulais me débarrasser.
Solution:
De toute évidence, il s'agit d'un problème très délicat, il a donc fallu une solution capricieuse. En fin de compte, j'ai utilisé un négatif letter-spacing
sur le texte plus audacieux comme cgTag recommandé ci-dessus, mais 1px aurait été bien excessif, alors j'ai juste calculé exactement la largeur dont j'aurais besoin.
En inspectant le bouton dans Chrome devtools, j'ai constaté que la largeur par défaut de mon bouton était de 165,47 pixels et de 165,69 pixels en survol, une différence de 0,22 pixels. Le bouton avait 9 caractères, donc:
0,22 / 9 = 0,024444px
En convertissant cela en unités em, je pourrais rendre le réglage de la taille de la police agnostique. Mon bouton utilisait une taille de police de 16 pixels, donc:
0,024444 / 16 = 0,001527em
Donc, pour ma police particulière, le CSS suivant garde les boutons exactement de la même largeur en survol:
.btn {
font-weight: 400;
}
.btn:hover {
font-weight: 500;
letter-spacing: -0.001527em;
}
Avec un peu de test et en utilisant la formule ci-dessus, vous pouvez trouver exactement le bon letter-spacing
valeur pour votre situation, et cela devrait fonctionner quelle que soit la taille de la police.
La seule mise en garde est que différents navigateurs utilisent des calculs de sous-pixels légèrement différents, donc si vous visez ce niveau OCD de précision sub-pixel-perfect, vous devrez répéter le test et définir une valeur différente pour chaque navigateur. Les styles CSS ciblés par navigateur sont généralement mal vus , pour une bonne raison, mais je pense que c'est un cas d'utilisation où c'est la seule option qui a du sens.