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

我在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;
    }

有时页面会正确加载：

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

以前有人见过这个问题吗？关于如何解决这个问题有什么建议吗？谢谢

---

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

WebFontConfig={
谷歌：{families:['Yanone+Kaffeesatz:400700:latin']}
};
（功能（）{
document.getElementsByTagName（“html”）[0].setAttribute（“类”，“wf加载”）
//需要将wf加载类推到您的头上
document.getElementsByTagName（“html”）[0].setAttribute（“类名”，“wf加载”）
//对于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）；
})();
.wf加载.article.list{可见性：隐藏；}
.wf非活动.article.list{visibility:visible；}
.wf active.article.list{font-family:'Yanone Kaffeesatz'，衬线；可见性：可见；}

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

WebFontConfig={
谷歌：{families:['Yanone+Kaffeesatz:400700:latin']}
};
（功能（）{
document.getElementsByTagName（“html”）[0].setAttribute（“类”，“wf加载”）
//需要将wf加载类推到您的头上
document.getElementsByTagName（“html”）[0].setAttribute（“类名”，“wf加载”）
//对于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）；
})();
.wf加载.article.list{可见性：隐藏；}
.wf非活动.article.list{visibility:visible；}
.wf active.article.list{font-family:'Yanone Kaffeesatz'，衬线；可见性：可见；}

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

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