我在树莓派上托管了一个小型网络服务器，我发现与@font-face 规则有些不一致。在我的网页中，我有一个从 W3Schools 借来的简单 javascript 时钟:
<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 chromium 上没有下载字体(我已经在开发人员面板中检查过)，并替换它带有又大又丑的宋体。在我的笔记本电脑和台式机上的 Firefox 和 IE 中也会发生同样的情况，尽管 IE 可能只是不支持 Woff2。
有没有人知道为什么会这样？
感谢您阅读本文，
迪伦
最佳答案
所以事实上 Raspberry Pi 上的 Chrome 似乎不支持 Woff2 字体，我使用了 FontSquirrel 并获得了一个字体套件，现在它可以完美运行。感谢 Jukka 为我指明了正确的方向。
关于javascript - css @font-face 规则不一致，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26470513/