Perché alcuni tipi di carattere di Google vengono visualizzati in modo errato in stile corsivo

Question

Sto riscontrando un problema strano con alcuni tipi di carattere Google.

Per esempio, sto usando il carattere Muli e in alcuni browser il testo viene visualizzato in stile italico quando la regola CSS è:

p { 
    font-style: normal; 
} 

Ho anche aperto la Google Web Fonts website con diversi browser (I testato con 16 diversi browser su 6 PC e Mac diversi) e solo con due di questi ho riscontrato il problema (uno su un browser Chrome e un altro su un browser Firefox).

This screenshot mostra un confronto side-by-side del carattere visualizzato in Firefox e un browser che mostra il tipo di carattere in stile italico

Perché sarebbe solo alcuni browser visualizzare questi font in corsivo? Cosa dovrei cercare nel rintracciare questo problema?

Answer 1

Speculatory! Se stai provando su 2 computer diversi, con la stessa versione di browser e browser, probabilmente la tua differenza di caratteri proviene dal sistema operativo. Con l'API di Google Googles quando viene effettuata una chiamata a Firefox o Chrome, viene utilizzato l'attributo locale, chiamando la versione del SO di quel font, se disponibile. In cui il font chiamato o dato dal sistema operativo potrebbe essere una versione in corsivo anziché normale.

Il mio suggerimento sarebbe quello di scaricare il font e importarlo manualmente, senza utilizzare l'attributo locale.

Quando si importa il tipo di carattere API di Google la seguente accade:

Una richiesta di Inconsolata da Firefox, ad esempio, restituisce il seguente CSS:

@font-face { 
    font-family: 'Inconsolata'; 
    src: local('Inconsolata'), url('http://themes.googleusercontent.com/fonts/font?kit=J_eeEGgHN8Gk3Eud0dz8jw') format('truetype'); 
} 

Una richiesta da Internet Explorer, dall'altra mano, restituisce:

@font-face { 
    font-family: 'Inconsolata'; 
    src: url('http://themes.googleusercontent.com/fonts/font?kit=J_eeEGgHN8Gk3Eud0dz8jw'); 
} 

https://developers.google.com/webfonts/docs/technical_considerations