Javascript css@font-face规则不一致_Javascript_Html_Css_Fonts_Raspberry Pi

Javascript css@font-face规则不一致

javascript html css fonts raspberry-pi

Javascript css@font-face规则不一致,javascript,html,css,fonts,raspberry-pi,Javascript,Html,Css,Fonts,Raspberry Pi,我在raspberry pi上托管了一个小型web服务器，我发现它与@font-face规则有些不一致。在我的网页中，我有一个简单的javascript时钟，它是从W3学校借来的： <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" type="text

我在raspberry pi上托管了一个小型web服务器，我发现它与@font-face规则有些不一致。在我的网页中，我有一个简单的javascript时钟，它是从W3学校借来的：

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

我的问题是，这种字体在我的笔记本电脑和桌面上都能以Chrome完美呈现，但奇怪的是，在我的RPi上，chromium并没有下载我在开发者面板中检查过的字体，而是用大而难看的Arial字体代替。Firefox和IE在我的笔记本电脑和台式机上也出现了同样的情况，尽管IE可能只是不支持Woff2

有人知道为什么会这样吗

感谢您阅读此文

Dylan

事实上，Raspberry Pi上的chromium似乎不支持Woff2字体，我使用了FontSquirrel并获得了一个字体工具包，现在它可以完美地工作。感谢Jukka为我指出了正确的方向。

chromium是否显示它正在尝试加载字体，但随后放弃了开发工具中的“网络”选项卡，或者它甚至没有做任何事情。您在pi上尝试过不同的浏览器吗？它运行的是哪个操作系统？查看并隔离您的问题–如果您使用的是W3傻瓜网站上的时钟，则可能与此完全无关，请先使用普通文本进行测试。如果使用Pi时右键单击或将鼠标悬停在文本上，字体是否会下载？搜索时，我在Chromium的旧版本中看到了类似这样的bug。嗨，谢谢你的回答，NoChromium甚至没有尝试下载字体，我已经读到chromium中的bug，不是那个。我提到javascript是因为我认为它可能会干扰css。早上我会看一下这个链接，我需要睡一觉：

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