2014-10-20 2 views
0

У меня есть небольшой веб-сервер на малине pi, и я наблюдаю некоторое несогласованность с правилом @ font-face. В моей странице у меня есть простой яваскрипт часы заимствованных из W3Schools:css @ несоответствие правила шрифта

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

У меня есть проблема в том, что шрифт делает отлично на моем ноутбуке в Chrome и на моем рабочем столе в Chrome, но любопытно, что мой RPi хром не загружает шрифт (я проверил в панели разработчиков) и заменяет его большим уродливым Arial. То же самое происходит в Firefox и в IE на моем ноутбуке и на рабочем столе, хотя IE, вероятно, просто не поддерживает Woff2.

Есть ли кто-нибудь, кто знает, почему это происходит?

Спасибо за чтение этого,

Дилан

+0

Хром показывает, что он пытается загрузить шрифт, но затем отдает (вкладка в сети в инструментах dev) или он даже не делает ничего с этим. Вы пробовали другой браузер на пи? (какая ОС работает?) –

+0

См. http://caniuse.com/#feat=woff2 и изолируйте свою проблему - возможно, совершенно неуместно, что вы используете часы с сайта w3fools, сначала тестируйте * обычный текст * , –

+0

Загружает ли шрифт, если вы щелкнете правой кнопкой мыши или наведите курсор на текст при использовании Pi? Поиск Я вижу ошибки в старой версии Chromium, которые звучат так. https://code.google.com/p/chromium/issues/detail?id=336476 –

ответ

0

Так ведь, кажется, что хром на Raspberry Pi не поддерживает шрифты Woff2, я FontSquirrel и получил набор шрифтов и теперь он работает отлично , Спасибо Jukka за то, что указал мне в правильном направлении.

Смежные вопросы