1

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

有时页面加载正确：

这就是它应该的样子

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

这就是它有时的样子

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

链接到网站。

4

1 回答 1

1

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

<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>
于 2012-03-05T08:22:16.630 回答