前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >django2用模板代码图标字体丢失报404 cJZKeOuBrn4kERxqtaUH3T8E0i7KZn-EPnyo3HZu7kw.woff

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

作者头像
玩蛇的胖纸
发布2018-07-05 17:03:05
8590
发布2018-07-05 17:03:05
举报

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

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

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

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

代码语言:javascript
复制
/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文件中,加入:

代码语言:javascript
复制
<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.这时,再运行项目,发现图标字体都出现了。其实这个时候已经不影响使用了,但是仍然还可以看到类似于下面这样的报错,令人看着非常不爽

代码语言:javascript
复制
[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目录下新建两个空文件,文件名就取

代码语言:javascript
复制
cJZKeOuBrn4kERxqtaUH3T8E0i7KZn-EPnyo3HZu7kw.woff

代码语言:javascript
复制
DXI1ORHCpsQm3Vp6mXoaTXhCUOGz7vYGh680lGh-uXM.woff

就行啦!

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2018-05-23 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 出在一个css文件中,这个文件就是font-awesome.min.css
  • 解决方案:
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档