iPad上的网站呈现间歇性错误

Question

我在iPad上的网站出现了一个奇怪的问题，有时页面只会在文本元素右侧加载一个奇怪的边距。这个问题在我更改了我的页面的font-family后开始。 字体是从谷歌加载的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.

Answer 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>