Question

我正在使用覆盆子pi托管一个小型Web服务器，我正在目睹与@ 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铬没有下载字体（我在开发人员面板中检查过），并取代了它与丑陋的Arial。在我的笔记本电脑和台式机上的Firefox和IE中也是如此，尽管IE可能只是不支持Woff2。

有没有人知道为什么会这样？

感谢您阅读本文，

迪伦

Answer 1

事实上，Raspberry Pi上的铬似乎不支持Woff2字体，我使用FontSquirrel并获得了一个字体套件，现在它完美无缺。感谢Jukka指出我正确的方向。

css @ font-face规则不一致

1 个答案: