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

就行啦！