浏览器未请求自定义字体答案

【问题标题】：Custom font face not requested by browsers浏览器未请求自定义字体
【发布时间】：2022-01-23 14:21:43
【问题描述】：

我知道标题相似的问题已经存在，但是读完之后我还是卡住了。

我正在使用Django 开发一个网站，并使用{% static %} 标签提供静态文件（css 和js），没有问题。我想使用自定义字体，所以将此样式标签放在我的基本模板中。（它最终以我期望的方式出现在页面的<head> 中。）

<style>
    @font-face {
        font-family: IRANSansX !important;
        font-style: normal;
        font-weight: 400;
        src: url({% static 'css/fonts/IRANSansX-Regular.woff2' %}) format('woff2'); /* final value -> url(/static/css/fonts/IRANSansX-Regular.woff2)*/
    }

    body {
        font-family: IRANSansX, sans-serif;
    }
</style>

令我惊讶的是，什么也没发生。在 Chrome 和 Firefox 中，浏览器不会发送下载字体的请求。我做了几项检查：

我测试并看到，如果我通过将 url() 的值附加到我的网站域来手动创建 url，Django 会提供字体。
我尝试将字体应用到其他元素，没有成功。
我尝试使用'' 和"" 作为我的字体系列名称和网址，但没有成功。
我尝试了另一种字体，没有成功。

奇怪的是 bootstrap-icons.woff2 字体，也是 woff2 类型，工作正常并被浏览器加载。唯一不同的是，它是由bootstrap-icons.css文件相对寻址的。

【问题讨论】：

标签： html css fonts font-face

【解决方案1】：

它适用于我如下：

@font-face {
    font-family: "iransans";
    src: url("./IRANSansWebFaNum.eot");
    src: url("./IRANSansWebFaNum.eot?#iefix") format("embedded-opentype"), url("./IRANSansWebFaNum.woff2") format("woff2"), url("./IRANSansWebFaNum.woff") format("woff");
    font-weight: normal;
    font-style: normal;
}

body {
  font-family: "IRANSansX", sans-serif;
}

【讨论】：

【解决方案2】：

在font-family 定义的末尾，全部都是!important。我删除了它，一切正常！

奇怪的是，如果!important 不是字体的一部分并且实际上破坏了它的功能，我的 IDE (Pycharm) 怎么没有触发警告。

【讨论】：