Google Font Letter Height non coerente

Sto riscontrando un problema strano in Chrome in cui un carattere di Google mostra altissime lettere delle lettere. Succede solo quando uso text-transform: uppercase ed è fisso se uso font-weight:bold . Ho un codice di esempio, dove puoi vedere che la S è troppo alta nella parola TESTING :

inserisci la descrizione dell'immagine qui

 body { font-family: 'Exo 2' !important; line-height:1.42857143; } div { width:40px; } span.upper { display:block; margin-top:20px; font-size:18px; text-transform:uppercase; } span {text-transform:uppercase; } 
  
Broken:
Testing 123
Normal:

Testing 123

Se cambio il font in arial , è corretto. C’è qualche proprietà CSS che devo resettare in modo che il font possa essere visualizzato correttamente?

Questo è un bug ben noto in Chrome su Windows. Chrome ha fatto la mossa politica / ecosistema per ridurre le dipendenze da altre società e altre tecnologie consolidate, come il passaggio alla fork Blink da Web-Kit. Chrome ha anche deciso di abbandonare il rendering dei font di Microsoft. Il risultato è un rendering sub-pixel scadente. Hai notato che una volta che hai ingrandito il tuo carattere in termini di dimensioni o peso, il problema è stato risolto perché i tratti dei caratteri sono più larghi di un pixel.

Una soluzione per te: puoi accedere ai flag di Chrome: // per abilitare la scrittura diretta.

Ma questo non aiuta i tuoi utenti, ovviamente. Ci sono alcuni hack.

Uno hack è quello di cambiare il tuo stack di font, in modo che SVG sia chiamato specificamente per il web-kit.

Puoi farlo con un trucco di media query:

 @media screen and (-webkit-min-device-pixel-ratio:0) { @font-face { font-family: 'chunk-webfont'; src: url('webfont.svg') format('svg'); } } 

Quindi ci sono problemi con questo. Non è a prova di futuro. È un hack. Ma per ora funziona, e Chrome lo sistemerà nel prossimo futuro. Altro, gli hack includono chiamare SVG prima nello stack, ma ha risultati meno affidabili.

Avevo gli stessi problemi con i browser Windows e ho provato a utilizzare SVG per primo nello stack ma non ha funzionato – in seguito ho scoperto che Chrome ha abbandonato il supporto per i font SVG. Così ho provato ad usare una versione TTF del mio font posizionata prima nello stack e per qualche motivo ha risolto il problema. Testato in Chrome, Firefox e Edge. Stranamente se faccio riferimento al TTF in un URI di dati, ritorna di nuovo alle lettere incoerenti.