浏览器未请求自定义字体
Posted
技术标签:
【中文标题】浏览器未请求自定义字体【英文标题】：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文件相对寻址的。
【问题讨论】：
【参考方案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) 怎么没有触发警告。
【讨论】：
以上是关于浏览器未请求自定义字体的主要内容，如果未能解决你的问题，请参考以下文章