Warum ist iOS Safari hinzufügen von zusätzlichen letter-spacing?

Ich glaube, ich habe gefunden eine web-rendering-Fehler für Google Fonts in Mobile (iOS 8) - Safari. Es scheint mir, dass der Mobile Safari fügt ein kleines bisschen von den Zeichenabstand für den gesamten text verwendet Google-Schriftarten, oder dass es verwendet eine andere schriftart. Es spielt keine Rolle, welche Google-Schriftart, die ich versuche (Open Sans). Es macht richtig auf allen modernen Browsern. Getestet Android, FF, Chrome, Safari.

Versuchen, laden Sie diese Seite auf einem iOS-Gerät, um zu sehen, was ich meine. Siehe auch siehe code und screenshot. Siehe diesen link für den live-review: https://dl.dropboxusercontent.com/u/430406/Temp%20%5Bok%20to%20delete%5D/Checking%20Font/index.html

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>

Warum ist iOS Safari hinzufügen von zusätzlichen letter-spacing?

  • Ich denke, Sie haben Ihre eigene Frage beantwortet, "Muli" ist nicht ein web-safe-schriftart, dafür können Sie erwarten, dass unerwartetes Verhalten in einigen Browsern ist das, was Sie erleben. Eine andere schriftart verwenden, vorzugsweise ein web-safe-schriftart, die für Kohärenz zwischen den Browsern. Ihre best practice.
  • FYI, ich habe nicht abgestimmt, wer jemals, zumindest eine Erklärung, warum Sie nach unten gestimmt. Das ist nicht die Förderung einer besseren Fragen/Antworten in SO.
  • iOS-Safari sollte Unterstützung für Google Fonts, und es macht richtig, in allen anderen modernen Browsern, also mit einem "web-sicherer" Schriftarten ist keine alternative. Es muss eine andere Lösung. Hier ist ein einfacheres Beispiel für das problem: dl.dropboxusercontent.com/u/430406/...
  • Hast du irgendwelche letter-spacing Regel auf das obige Beispiel (screenshots)?
  • Nein habe ich nicht. Finden Sie die dropbox-link in meinem Kommentar, für eine einfachere Lösung. Schauen Sie sich den code.
  • das dropbox-link funktioniert nicht, ignoriert es die von nicht-sicheren Inhalt.

InformationsquelleAutor Andreas | 2015-03-03
  1. 45

    Fand ich die Lösung in dieser Frage: iOS 4.2+ webfont (ttf) 's bold font-weight rendering bug

    Mobile Safari ist buggy rendering-faux-Schrift zu gewichten, wenn Sie nicht setzen Sie den font-weight (auf zB. font-weight: 400 oder font-weight: normal), die Sie benötigen, um speziell die css schriftart Gewicht für die die es korrekt im mobile safari.

    Dies ist die Lösung.

    CSS:

    h2 {
  font-weight: 400;
}

    • Ich gebe Ihnen 1000 upvotes, wenn ich könnte. Nur Verschwendete 3 Stunden an diesem problem.
    • Ich hatte ein ähnliches Problem: ich hatte die Einstellung das Gewicht aber tatsächlich gar nicht laden in das Gewicht für die schriftart.
    InformationsquelleAutor Andreas
  2. 13

    Beachten Sie, dass Google Web-Fonts exportiert nur den regulären Gewicht (400) standardmäßig aktiviert, was dazu führen kann Mobile Safari (und anderen Browsern) gezwungen zu verhängen, um "faux Fett".

    Explizit exportieren kühner GEWICHTE, wählen Sie "ANPASSEN" in die Google-Web-Font schriftart Auswahl " manuell überprüfen jedes zusätzliche Gewicht, die Sie benötigen, und verwenden Sie die aktualisierte code einbetten.

    Warum ist iOS Safari hinzufügen von zusätzlichen letter-spacing?]Eins

    • Feste mein problem, wusste nicht, dass Browser angewendet, ein "faux Fett" ohne die richtige font-Datei(en)
    InformationsquelleAutor Daniel Jones
Schreibe einen Kommentar