css @ font-face規則不一致

我在一個覆盆子pi上託管一個小型web服務器，並且我正在目睹與@ font-face規則的不一致。在我的網頁我有一個從W3Schools的借一個簡單的JavaScript時鐘：css @ font-face規則不一致

<html> 
    <head> 
     <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
     <link rel="stylesheet" type="text/css" href="style.css"> 
     <script> 
      function startTime() { 
       var today = new Date(); 
       var h = today.getHours(); 
       var m = today.getMinutes(); 
       m = checkTime(m); 
       document.getElementById('clock').innerHTML = h + ":" + m ; 
       var t = setTimeout(function() { 
        startTime() 
       }, 500); 
      } 

      function checkTime(i) { 
       if (i < 10) { 
        i = "0" + i 
       };// add zero in front of numbers < 10 
       return i; 
      } 
     </script> 
    </head> 

    <body onload="startTime()"> 

     <div id="clock"></div> 

    </body> 

</html>

然後我嘗試用@fontface屬性風格的時鐘：

@font-face { 
    font-family: 'roboto-thin'; 
    font-style: normal; 
    font-weight: 100; 
    src: url('res/roboto-thin.woff2') format('woff2'); 
} 
#clock{ 
    font-family: 'roboto-thin'; 
    font-size: 100px; 
    color:#f1f1f1; 
    float: right; 
}

我的問題是字體完美呈現在我的筆記本電腦上，在我的桌面上，但在我的RPi鉻上，我並沒有下載字體（我已經在開發人員面板中檢查過），並用大丑陋的Arial替換它。 Firefox和IE在我的筆記本電腦和臺式機上也是如此，儘管IE可能不支持Woff2。

有沒有人知道爲什麼會發生這種情況？

感謝您讀這篇文章，

迪倫

來源

2014-10-20 dylan robins

鉻是否表明它試圖加載字體，但後來放棄（開發工具中的網絡選項卡）或者甚至沒有做任何事情。你在pi上試過不同的瀏覽器嗎？（哪個操作系統正在運行？） – 2014-10-20 16:34:11

請參閱http://caniuse.com/#feat=woff2並隔離您的問題 - 這可能完全不相關，您正在使用w3fools站點的時鐘，首先使用普通文本進行測試。 – 2014-10-20 16:39:33

如果在使用Pi時右鍵單擊或懸停在文本上，字體是否會下載？搜索我看到老版本的Chromium中的錯誤，聽起來就像這樣。 https://code.google.com/p/chromium/issues/detail?id=336476 – 2014-10-20 16:53:54

所以實際上它似乎對樹莓派鉻不支持Woff2字體，我用FontSquirrel，並得到了字庫，現在它完美。感謝Jukka指引我朝着正確的方向前進。

來源

2014-10-21 09:27:49

css @ font-face規則不一致

回答

相關問題