Question

我似乎无法在Firefox 54.0和Chromium 59.0.3071.86中加载自定义字体。查看Firefox的元素检查工具中的“网络”选项卡，我看到没有加载/下载任何字体，与Chromium相同。

以下是相关的CSS：https://hastebin.com/raw/quyivirosa
这是HTML：https://hastebin.com/iciwavoyus.xml

我已经检查过了，字体的网址都是正确的，所以我不知道它为什么拒绝工作。导航栏中的字体有什么用处，但是我猜测一个是在本地加载的，因为它已安装在我的系统上。

我做错了吗......？我在周围搜索过，找不到解决问题的方法。

Answer 1

我在你的CSS中发现了两个错误，一旦修复它们，字体就开始工作了。

我改变了

    @font-face {
        font-family: 'DejaVu Condensed'; !important
        src: url('/fonts/DejaVuSansCondensed.eot');
        src: url('/fonts/DejaVuSansCondensed.eot?#iefix') format('embedded-  opentype'),
            url('/fonts/DejaVuSansCondensed.woff2') format('woff2'),
            url('/fonts/DejaVuSansCondensed.woff') format('woff'),;
        font-weight: normal;
        font-style: normal;
    }

到

    @font-face {
        font-family: 'DejaVu Condensed' !important; 
        src: url('/fonts/DejaVuSansCondensed-Bold.eot');
        src: url('/fonts/DejaVuSansCondensed-Bold.eot?#iefix') format('embedded-opentype'),
                url('/fonts/DejaVuSansCondensed-Bold.woff2') format('woff2'),
                url('/fonts/DejaVuSansCondensed-Bold.woff') format('woff');
        font-weight: bold;
        font-style: normal;
    }

在第二行，重要的是应该在分号内。在第六行，我删除了分号前面的昏迷。修复后，字体面踢入

CSS中有3种自定义字体无法加载

1 个答案: