Google WebFont Lato 100 und Mobile Safari

Question

Ich verwende Googles Web-Schriftart-API mit der Schriftart "Lato", Schriftgewicht von 100.

Auf den Desktop -Browsern habe ich alles getestet, was gut angezeigt wird. Wenn ich jedoch die Webseite mit iPad oder iPhone (beide iOS5) ansehe, stelle ich fest, dass die Schriftart extrem dünn ist und das einzige, was richtig angezeigt wird, die Punkte sind.

Ich habe versucht, die Schriftart mithilfe der Methoden JavaScript, Link-Tag und CSS @import zu implementieren, die alle die gleichen Ergebnisse erzielen.

Ich habe gesehen, dass sie in den FAQs feststellen: Die Google Web -Schriftarten -API funktioniert zuverlässig auf der überwiegenden Mehrheit der modernen mobilen Betriebssysteme, einschließlich Android 2.2+ und iOS 4.2+ (iPhone, iPad, iPod). Die Unterstützung früherer iOS -Versionen ist begrenzt.

Was bedeutet, dass es funktionieren sollte, oder? Gibt es trotzdem, um dies zu lösen?

Vielen Dank

Answer 1

Etwas, das ich gesehen habe, um wirklich dünne Schriftarten zu helfen (fließend auch Lato) ist Folgendes:

-webkit-text-stroke-width: 0.1px;

Wie auch immer, es ist nur ein Fall von Fall, ich würde eine Klassen- / Medienabfrage verwenden, um sicherzustellen, dass sie sie nur bei Bedarf anwendet (Safari (mit einer von JS festgelegten Klasse) auf einer Skala unter 1.0 oder so). Versuchen Sie bei Bedarf höhere Float -Werte.

Answer 2

Es scheint mir, dass es sich um eine unglückliche Kombination aus einer ultra -dünnen Schrift handelt, in der die mobile Safari die Website skaliert, die in den Bildschirm passt. Normalerweise haben Schriftarten angedeutet, dass Ihr Computer interpretieren kann, wie Pixel zu malen, wenn er auf Subpixel -Ebenen gelangt. Dies wird jedoch durch die Skalierung von Mobile Safari überschrieben und malt daher halbe Pixel als halbtransparent.

Sie können verhindern, dass mobile Safari Ihre Website abnimmt, indem Sie das folgende Meta -Tag hinzufügen:

<meta name="viewport" content="initial-scale=1.0; minimum-scale=1.0">

Wenn Sie möchten, dass die Schriftart in mobiler Safari kleiner erscheint, besteht die Lösung darin, die vorherige Deklaration zu behalten und die Schriftgröße als Medienabfrage zu deklarieren:

@media only screen and (max-device-width: 480px) {
  font-size: 15px;
}

Wenn alles andere fehlschlägt, würde ich einen 0PX -Textschatten hinzufügen:

.selector {
   text-shadow: 0 0 0 white;
}

Answer 3

Vielleicht ist es -webkit-text-size-adjust 's Schuld. Versuchen

-webkit-text-size-adjust : none

Answer 4

Sie können versuchen, dies Ihrem CSS für das betreffende Element hinzuzufügen:

-webkit-font-smoothing: subpixel-antialiased;

In ähnlicher Weise können Sie Transformationen haben, die die Antialiasing bewirken. Sie können es auch versuchen:

-webkit-transform: translate3d(0,0,0);

Und sogar...

-webkit-backface-visibility: hidden;

Verrückt, ich weiß.

Answer 5

Benutzt du Ultra-Light 100? Wenn Sie es auf 100 einstellen, aber die Datei ist ein weiteres Gewicht, das mobile Safari möglicherweise versucht, die dünnere Variante zu simulieren.

In jedem Fall versuchen Sie es -webkit-font-smoothing: antialiased;, Wenn das nicht funktioniert, probieren Sie das 300 aus.