Questa è una domanda molto vecchia, ma la sto rivisitando perché ho riscontrato questo problema in un'app che sto sviluppando e ho trovato tutte le risposte che volevano.
(Salta questo paragrafo per il TL; DR ...)Sto usando il carattere web Gotham da cloud.typography.com e ho pulsanti che iniziano vuoti (con un bordo / testo bianco e uno sfondo trasparente) e acquisiscono un colore di sfondo al passaggio del mouse. Ho scoperto che alcuni dei colori di sfondo che stavo usando non erano in contrasto con il testo bianco, quindi volevo cambiare il testo in nero per quei pulsanti, ma, a causa di un trucco visivo o dei comuni metodi di anti-aliasing, scuro il testo su uno sfondo chiaro sembra sempre essere più leggero del testo bianco su uno sfondo scuro. Ho scoperto che aumentare il peso da 400 a 500 per il testo scuro manteneva quasi esattamente lo stesso peso "visivo". Tuttavia, stava aumentando la larghezza del pulsante di una piccola quantità - una frazione di pixel - ma era sufficiente per far sembrare i pulsanti leggermente "tremolanti", cosa che volevo eliminare.
Soluzione:
Ovviamente, questo è un problema davvero complicato, quindi richiedeva una soluzione complicata. Alla fine ho usato un negativo letter-spacing
sul testo più audace come cgTag consigliato sopra, ma 1px sarebbe stato eccessivo, quindi ho calcolato esattamente la larghezza di cui avrei avuto bisogno.
Ispezionando il pulsante in Chrome devtools, ho scoperto che la larghezza predefinita del mio pulsante era 165,47 px e 165,69 px al passaggio del mouse, una differenza di 0,22 px. Il pulsante aveva 9 caratteri, quindi:
0,22 / 9 = 0,024444 px
Convertendolo in unità em, potrei rendere la regolazione della dimensione del carattere indipendente. Il mio pulsante utilizzava una dimensione del carattere di 16 px, quindi:
0,024444 / 16 = 0,001527 em
Quindi, per il mio carattere particolare, il seguente CSS mantiene i pulsanti esattamente della stessa larghezza al passaggio del mouse:
.btn {
font-weight: 400;
}
.btn:hover {
font-weight: 500;
letter-spacing: -0.001527em;
}
Con un po 'di test e utilizzando la formula sopra, puoi trovare esattamente il letter-spacing
valore giusto per la tua situazione e dovrebbe funzionare indipendentemente dalla dimensione del carattere.
L'unico avvertimento è che browser diversi utilizzano calcoli sub-pixel leggermente diversi, quindi se stai mirando a questo livello OCD di precisione sub-pixel perfetta, dovrai ripetere il test e impostare un valore diverso per ogni browser. Gli stili CSS mirati al browser sono generalmente disapprovati , per una buona ragione, ma penso che questo sia un caso d'uso in cui è l'unica opzione che ha senso.