专栏首页雪胖纸的玩蛇日常django2用模板代码图标字体丢失报404 cJZKeOuBrn4kERxqtaUH3T8E0i7KZn-EPnyo3HZu7kw.woff

django2用模板代码图标字体丢失报404 cJZKeOuBrn4kERxqtaUH3T8E0i7KZn-EPnyo3HZu7kw.woff

以前开发网站,不是用php就是用c#或java写后端,跟后端繁重麻烦的代码相比,前端的html+css+JavaScript简直就简单的不算技术,相比之下,工作量也不大。

但如果用django框架,使用python来写后端逻辑,正所谓美女都是需要通过比较而来的,因为python更加的简洁优雅,相比之下,前端松松垮垮的JavaScript,七扭八斜的css,简直麻烦的让人想砸电脑,本来相较于后端工作量较小的前端开发,瞬间成为了整个项目至少百分之八十的工程量!

于是,使用前端模板,就成了一个必由之路!

但,django毕竟还没大行其道,在网上的模板中,基本上所有的模板,都是在为phper开发方便而做的,虽然大同小异,django拿过来用也没什么,但是多多少少也会一些大坑小坑,其中字体的路径配置,就需要讲究一下。

/cJZKeOuBrn4kERxqtaUH3T8E0i7KZn-EPnyo3HZu7kw.woff 404
DXI1ORHCpsQm3Vp6mXoaTXhCUOGz7vYGh680lGh-uXM.woff HTTP/1.1" 404
#……

将前端模板代码导入django项目中,运行一看,前端的图标字体丢失了,全都变成了小方块

问题出在哪?

出在一个css文件中,这个文件就是font-awesome.min.css

解决方案:

1.打开font-awesome.min.css

2.删除此文件的第一行(别管有多长)

3.在html文件中,加入:

<style>
@font-face{font-family:'FontAwesome';
src:url("{% static 'font/fontawesome-webfont.eot' %}");
src:url("{% static 'font/fontawesome-webfont.eot' %}") format('embedded-opentype'),
url("{% static 'font/fontawesome-webfont.woff' %}") format('woff'),
url("{% static 'font/fontawesome-webfont.ttf' %}") format('truetype'),
url("{% static 'font/fontawesome-webfont.svg' %}") format('svg');
font-weight:normal;font-style:normal;}[class^="icon-"],[class*=" icon-"]{font-family:FontAwesome;
font-weight:normal;font-style:normal;text-decoration:inherit;
-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing: grayscale;
*margin-right:.3em;}
</style>

4.这时,再运行项目,发现图标字体都出现了。其实这个时候已经不影响使用了,但是仍然还可以看到类似于下面这样的报错,令人看着非常不爽

[23/May/2018 23:06:21] "GET /static/font/cJZKeOuBrn4kERxqtaUH3T8E0i7KZn-EPnyo3HZu7kw.woff HTTP/1.1" 404 0
[23/May/2018 23:06:21] "GET /static/font/DXI1ORHCpsQm3Vp6mXoaTXhCUOGz7vYGh680lGh-uXM.woff HTTP/1.1" 404 0

5.之所以有此报错呢,网上说是因为谷歌被墙,当然了,这不重要,既然不影响使用,目的只是为了不让它出现来恶心人,只要在static/font目录下新建两个空文件,文件名就取

cJZKeOuBrn4kERxqtaUH3T8E0i7KZn-EPnyo3HZu7kw.woff

DXI1ORHCpsQm3Vp6mXoaTXhCUOGz7vYGh680lGh-uXM.woff

就行啦!

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 广告小程序后端开发(11.个人中心:获取用户数据,用户发布的广告和店铺及图片)

    玩蛇的胖纸
  • 超越村后端开发(7:修改完善代码(持续更新))

    玩蛇的胖纸
  • 广告小程序后端开发(14.积分商城:获取积分商品列表,获取积分商品详情)

    玩蛇的胖纸
  • CSS3 font 学习笔记

    LRainner
  • 让你的网站用上炫酷的中文字体

    随着当前 Web 技术的日新月异,网页界面内容越来越丰富,让人眼花缭乱,其中就包括了网页中的各种自定义字体。

    米开朗基杨
  • @font-face 属性

    @font-face 允许网页开发者为其网页指定在线字体。 通过这种作者自备字体的方式,@font-face 可以消除对用户电脑字体的依赖。 @font-f...

    Html5知典
  • [C#] 常用工具类——直接在浏览器输出数据

    跟着阿笨一起玩NET
  • HTML5基础——文字常用标签(上)

    一、微文概览 标题 字体与字号 颜色 二、详细介绍 1. 标题 我们在HTML文件中写一篇文字时,总会希望将标题的文字设置的大一些,黑一些,粗一些,那么怎样在H...

    用户1667431
  • Android开发之 全局替换字体

    第一反应是好简单,换个TypeFace不就完了,但是不可能每个控件去设置一个吧?不存在的。

    Xiaolei123
  • iconfont关于content值的坑

    font-carrier是一个功能强大的字体操作库,使用它你可以随心所欲的操作字体。让你可以在svg的维度改造字体的展现形状。 //可以设置某个字对应的形状,当...

    IMWeb前端团队

扫码关注云+社区

领取腾讯云代金券