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规则不一致

回答

相关问题