谷歌web字体拉托100和移动Safari浏览器

我使用谷歌的Web字体API的字体“拉托”，为100谷歌web字体拉托100和移动Safari浏览器

字体重量在我所测试过的桌面浏览器都显示正常。但是，如果我使用iPad或iPhone（都是iOS5）查看网页，我注意到字体非常薄，似乎正确显示的唯一东西就是点。

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

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

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

感谢

2012-02-17 Joseph

你能发表截图吗？ 100看起来非常薄，可能是解决方案。你必须使用实际的字体吗？如果它只是一个小文本，最好使用图片... – Yisela 2012-02-17 20:31:03

我希望这可以工作：https：//lh6.googleusercontent.com/-QhOEvtKPXgY/Tz9eQJzuQxI/AAAAAAAAAAc/htEUOQCeRls/s481/Screen%2520Shot.jpg – Joseph 2012-02-18 08:17:34

最好有一个jsfiddle页来演示发生了什么...... – vincicat 2012-03-11 07:56:33

东西我见过，帮助真的瘦了字体（顺便说一句也拉托）是这样的：

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

无论如何，这只是按个别情况下，我会用一个类/媒体查询，以确保仅适用它需要时（safari（由js设置的类）在1.0或以下的比例）。如果需要，尝试更高的浮点值。

2012-03-12 13:00:49 sg3s

这是Safari浏览器每一个“细字体”问题（渲染不好）的答案。不能相信这是在StackOverflow中唯一的答案！ – 2014-09-23 15:19:33

你可以试着在问题添加以下内容到CSS的元素：

-webkit-font-smoothing: subpixel-antialiased;

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

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

即使...

-webkit-backface-visibility: hidden;

疯了，我知道了。

2012-02-18 00:30:23

没有任何组合解决了这个问题。 – Joseph 2012-02-18 08:18:38

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

-webkit-text-size-adjust : none

2012-03-09 19:23:06 mddw

不 - 对不起并没有解决它。我也注意到这个错误也出现在一些Windows浏览器（即旧版本的IE）中 – Joseph 2012-03-11 06:18:05

你使用的是Ultra-Light 100？如果将其设置为100，但该文件是另一个重量，则移动Safari可能试图模拟较薄的变体。

无论哪种方式，尽量-webkit-font-smoothing: antialiased;，如果不工作，你的运气了，尝试300

2012-03-11 15:31:01

在我看来，它的超薄字体的搭配方式移动Safari不走运的组合缩放网站以适应屏幕。通常字体会暗示您的计算机可以解释如何在像素级别上绘制像素，但这会被Mobile Safari的缩放比例所覆盖，从而将半像素绘制为半透明。

你可以防止移动Safari浏览器通过添加以下meta标签缩减您的网站：

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

如果你想要的字体出现在移动Safari浏览器时，该解决方案将是保持与先前的声明，并宣布字体大小媒体查询：

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

如果一切都失败了，我想补充一个0像素文字阴影：

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

2012-03-12 07:12:57 Duopixel

回答