网站在 iPad 上呈现间歇性错误答案

【问题标题】：Website rendering intermittently wrong on the iPad网站在 iPad 上呈现间歇性错误
【发布时间】：2012-02-28 03:50:43
【问题描述】：

我在 iPad 上的网站出现了一个奇怪的问题，有时页面会在文本元素右侧加载一个奇怪的边距。这个问题是在我更改页面的字体系列之后开始的。字体是从谷歌加载的 Yanone Kaffeesatz。字体总是正确加载，但由于在我假设问题是由字体引起的之前从未发生过这种边距的事情。

这是在 css 上定义字体的方式：

    html, body {
      width: 100%;
      height: 100%;
      background: url('../img/type.png');
      font-family: 'Yanone Kaffeesatz',Arial,sans-serif;
      font-size: 12pt;
      position: relative;
    }

有时页面加载正确：

有时它会像这样加载：（这是一个间歇性问题，但我观察到我可以通过删除缓存并打开页面使其像这样加载）

以前有人见过这个问题吗？关于如何解决它的任何提示？谢谢！

Link to site.

【问题讨论】：

请在您的帖子中添加更多详细信息...一些代码？哪些字体？
字体为Yanone Kaffeesatz，从google加载。
如果你切换回另一种字体，问题就消失了？
我对字体不够熟悉，无法解释您的结果。但是，您的优势在于您知道这个字体是原因。只需将字体转储为类似的东西......还有一百万。
没有什么可弄清楚的...字体已损坏、不合规格、损坏等。或者它的某些独特之处会触发一个晦涩的 iPad 渲染错误。无论哪种方式，为什么要在这样一个微不足道的问题上浪费更多时间？有一个网站，您可以在其中上传一段文本示例，它将返回所有匹配的字体。我相信你可以找到与Yanone Kaffeesatz 匹配的其他内容。

标签： ipad mobile-safari mobile-webkit

【解决方案1】：

您似乎删除了您网站上的自定义字体。我无法使用 ipad 在本地网络上创建测试用例。但我建议你使用FOUT fix for loading custom fonts。

<script>
    WebFontConfig = {
        google: { families: [ 'Yanone+Kaffeesatz:400,700:latin' ] }
    };
    (function() {
        document.getElementsByTagName("html")[0].setAttribute("class","wf-loading")
        //  NEEDED to push the wf-loading class to your head
        document.getElementsByTagName("html")[0].setAttribute("className","wf-loading")
        // for IE…
        var wf = document.createElement('script');
        wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
        '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
        wf.type = 'text/javascript';
        wf.async = 'false';
        var s = document.getElementsByTagName('script')[0];
        s.parentNode.insertBefore(wf, s);
    })();
</script>

<style type="text/css">
    .wf-loading .article.list {visibility:hidden;}
    .wf-inactive .article.list{ visibility:visible;}
    .wf-active .article.list{font-family: 'Yanone Kaffeesatz', serif;visibility:visible;}
</style>

【讨论】：