Question

我使用Google的网络字体api，字体为“Lato”，字体重量为100。

在桌面浏览器上，我测试过一切正常。但是，如果我使用iPad或iPhone（两者都是iOS5）查看网页，我会注意到字体非常薄，而且似乎唯一正确显示的是点。

我尝试使用Javascript，LINK-Tag和CSS @import方法实现字体，都产生相同的结果。

我在常见问题解答中看到他们说： Google Web Fonts API可在绝大多数现代移动操作系统上可靠运行，包括Android 2.2+和iOS 4.2+（iPhone，iPad，iPod）。对早期iOS版本的支持有限。

这意味着它应该有效，对吗？无论如何要解决这个问题吗？

由于

Answer 1

我所看到的帮助真正瘦字体的东西（特别是Lato）就是：

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

无论如何，它只是一个案例的基础，我会使用类/媒体查询，以确保只在需要时应用它（safari（由js设置的类）在1.0以下的规模）。如果需要，请尝试更高的浮点值。

Answer 2

在我看来，这是一个超薄字体的不幸组合，以及Mobile Safari扩展网站以适应屏幕的方式。通常，字体具有暗示，允许计算机解释如果像素达到子像素级别时如何绘制像素，但这会被Mobile Safari的缩放覆盖，因此将半像素描绘为半透明。

您可以通过添加以下元标记来阻止移动版Safari缩减您的网站：

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

如果您希望字体在移动版Safari中显得更小，解决方案是保留上一个声明并将字体大小声明为媒体查询：

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

如果所有其他方法都失败了，我会添加一个0px的文字阴影：

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

Answer 3

也许这是-webkit-text-size-adjust的错。尝试

-webkit-text-size-adjust : none

Answer 4

你可以尝试将这个添加到CSS中，用于相关元素：

-webkit-font-smoothing: subpixel-antialiased;

同样，您可能具有影响抗锯齿的变换。你也可以尝试：

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

甚至......

-webkit-backface-visibility: hidden;

疯了，我知道。

Answer 5

您使用的是Ultra-Light 100吗？如果将其设置为100，但文件是另一个权重，Mobile Safari可能会尝试模拟更薄的变体。

无论哪种方式，请尝试-webkit-font-smoothing: antialiased;，如果这不起作用，请尝试300。