Pourquoi iOS Safari ajoute-t-il un espacement supplémentaire?
Je pense avoir trouvé un bogue de rendu Web pour Google Fonts dans Mobile (iOS 8) Safari. Il me semble que Mobile Safari ajoute un tout petit peu d'espacement des lettres à tout le texte qui utilise Google Fonts, ou qu'il utilise une autre police. Peu importe la police Google que j'essaie (Open Sans). Il s'affiche correctement sur tous les navigateurs modernes. Testé Android, FF, Chrome, Safari.
Essayez de charger cette page sur un appareil iOS pour voir ce que je veux dire. Voir aussi voir code et capture d'écran. Voir ce lien pour un examen en direct: 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>
J'ai trouvé la solution dans cette question: bogue gras de rendu de poids de police d'iOS 4.2+ webfont (ttf)
Mobile Safari est un buggy qui rend les faux poids de police, si vous ne définissez pas le poids de la police (par exemple. font-weight: 400 ou font-weight: normal) Vous devez définir spécifiquement le poids de la police css pour qu'elle s'affiche correctement dans Safari mobile.
Voilà la solution.
h2 {
font-weight: 400;
}Notez que Google Web Fonts exporte uniquement le poids normal (400) par défaut, ce qui peut conduire à Mobile Safari (et autres navigateurs) à imposer un faux gras.
Pour exporter explicitement des poids plus audacieux, sélectionnez "PERSONNALISER" dans le volet de sélection de police de police Web Google, vérifiez manuellement chaque poids supplémentaire dont vous avez besoin et utilisez le code d'intégration mis à jour.
)