iPad上的網站呈現間歇性錯誤

我在iPad上遇到了一個奇怪的問題，我的網站有時會在文本元素的右側加載一個奇怪的邊距。這個問題在我改變我的頁面的字體系列之後開始了。字體是從谷歌加載的Yanone Kaffeesatz。該字體總是正確加載，但由於這個保證金事情從來沒有發生過，因爲我認爲無論問題是由字體引起的。iPad上的網站呈現間歇性錯誤

這裏是如何的字體是在CSS定義：

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

有時網頁加載正確：

This is what it should look like

它加載一些這樣的時間：（這是一個間歇性問題，但我發現我可以通過刪除緩存並打開頁面來使它加載）

This is what it sometimes looks like

有沒有人曾經見過這個問題？關於如何解決它的任何提示？謝謝！

Link to site.

來源

2012-02-28 Raphael

請在您發佈的內容上添加更多細節...某些代碼？哪些字體？ – Sparky 2012-02-28 04:02:07

字體是從谷歌加載的Yanone Kaffeesatz。 – Raphael 2012-02-28 04:06:10

如果您切換回另一種字體，問題就會消失？ – Sparky 2012-02-28 04:07:42

看來您的網站上刪除自定義字體。我無法用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>

來源

2012-03-05 08:22:16 trkaplan

iPad上的網站呈現間歇性錯誤

回答

相關問題