css - Google webfont Lato 100 和移动版 Safari

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 版本的支持是有限的。

这意味着它应该工作，对吧？有没有办法解决这个问题？

谢谢

score 5 · Accepted Answer

我所看到的有助于真正瘦字体（顺便还有 Lato）是这样的：

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

无论如何，这只是个案，我会使用类/媒体查询来确保只在需要时应用它（野生动物园（由 js 设置的类），规模低于 1.0 或其他东西）。如果需要，请尝试更高的浮点值。

score 2 · Accepted Answer

在我看来，这是超薄字体与 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;
}

score 1 · Accepted Answer

1

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

-webkit-text-size-adjust : none

于 2012-03-09T19:23:06.193 回答

score 0 · Accepted Answer

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

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

score 0 · Accepted Answer

您可以尝试将其添加到有问题的元素的 CSS 中：

-webkit-font-smoothing: subpixel-antialiased;

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

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

乃至...

-webkit-backface-visibility: hidden;

疯了，我知道。

5 回答 5