У меня есть небольшой веб-сервер на малине 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.
Есть ли кто-нибудь, кто знает, почему это происходит?
Спасибо за чтение этого,
Дилан
Хром показывает, что он пытается загрузить шрифт, но затем отдает (вкладка в сети в инструментах dev) или он даже не делает ничего с этим. Вы пробовали другой браузер на пи? (какая ОС работает?) –
См. http://caniuse.com/#feat=woff2 и изолируйте свою проблему - возможно, совершенно неуместно, что вы используете часы с сайта w3fools, сначала тестируйте * обычный текст * , –
Загружает ли шрифт, если вы щелкнете правой кнопкой мыши или наведите курсор на текст при использовании Pi? Поиск Я вижу ошибки в старой версии Chromium, которые звучат так. https://code.google.com/p/chromium/issues/detail?id=336476 –