Perché iOS Safari aggiunge una spaziatura extra alle lettere?

Penso di aver trovato un bug di rendering Web per Google Fonts in Mobile (iOS 8) Safari. Mi sembra che Mobile Safari aggiunga un po 'di spaziatura delle lettere a tutto il testo che utilizza Google Fonts o che usi un altro font. Non importa quale tipo di carattere Google provo (Open Sans). Rende correttamente su tutti i browser moderni. Testato Android, FF, Chrome, Safari.Perché iOS Safari aggiunge una spaziatura extra alle lettere?

Prova a caricare questa pagina su un dispositivo iOS per vedere cosa intendo. Vedi anche vedere il codice e lo screenshot. Vedere questo link per la revisione dal vivo: https://dl.dropboxusercontent.com/u/430406/Temp%20%5Bok%20to%20delete%5D/Checking%20Font/index.html

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <title></title> 
 
    <link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'> 
 
</head> 
 

 
<body> 
 
    <h2 style="font-family: 'Roboto'">Roboto: Looks like it gets a bit extra line-spacing in iOS Safari, though this is not possible to find in web inspector</h2> 
 
    <h2 style="font-family: 'Arial'">Arial: Works fine in iOS Safari</h2> 
 
</body> 
 

 
</html>

enter image description here

fonte

2015-03-03 Andreas

Penso di aver risposto alla tua domanda, "Muli" non è un tipo di carattere Web sicuro, Perciò ci si può aspettare un comportamento imprevisto in alcuni browser che è quello che si sta vivendo. Utilizzare un carattere diverso, preferibilmente un carattere sicuro per Web per coerenza tra i browser. È una buona pratica. – EaziLuizi

FYI, non ho votato, chi ha mai fatto, almeno fornire una spiegazione sul motivo per cui hai votato. Questo non sta promuovendo migliori domande/risposte in SO. – EaziLuizi

iOS Safari dovrebbe supportare Google Fonts e il rendering viene eseguito correttamente in tutti gli altri browser moderni, quindi l'utilizzo di un carattere "sicuro per il Web" non è un'alternativa. Ci deve essere un'altra soluzione. Ecco un esempio più semplice del problema: https://dl.dropboxusercontent.com/u/430406/Temp%20%5Bok%20to%20delete%5D/Checking%20Font/index.html – Andreas

Ho trovato la soluzione in questa domanda: iOS 4.2+ webfont (ttf) 's bold font-weight rendering bug

Safari Mobile è resa buggy finto font, se non impostare il peso del font (ad esempio font-weight: 400 o font-weight: normal) È necessario impostare in modo specifico il peso del font css t per renderlo correttamente nel safari mobile.

Questa è la soluzione.

h2 { 
 
    font-weight: 400; 
 
}

fonte

2015-03-03 16:32:26 Andreas

Se potessi, ti darei 1000 upvotes. Ho appena perso 3 ore su questo problema. –

Ho avuto un problema simile: stavo impostando il peso ma non stavo effettivamente caricando il peso per quel tipo di carattere. – AlexKempton

presente che Google Web Fonts esporta solo il peso normale (400) per impostazione predefinita, che può portare a Safari Mobile (e altri browser) costretti ad imporre finto grassetto.

Per esportare in modo esplicito i pesi in grassetto, selezionare "CUSTOMIZE" nel riquadro di selezione carattere font Web di Google, controllare manualmente ogni peso aggiuntivo necessario e utilizzare il codice di incorporamento aggiornato.

)] 1

fonte

2016-10-06 16:21:30

Risolto il problema, non mi ero reso conto che i browser applicassero un falso finto senza i file di font corretti – Brandito

Perché iOS Safari aggiunge una spaziatura extra alle lettere?

risposta

Problemi correlati