亲身踩坑多种方法帮你解决 Failed to decode downloaded font VUE 引入字体没有效果-Toy模板网

这篇具有很好参考价值的文章主要介绍了亲身踩坑多种方法帮你解决 Failed to decode downloaded font VUE 引入字体没有效果。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

报错信息

亲身踩坑多种方法帮你解决 Failed to decode downloaded font VUE 引入字体没有效果,vue.js,前端,javascript

注意，你需要保证你的CSS文件和字体文件在同一个文件夹，且是平级的。
亲身踩坑多种方法帮你解决 Failed to decode downloaded font VUE 引入字体没有效果,vue.js,前端,javascript

尝试方法1

把字体文件的格式名称改为小写。

结果对我来说没用。
亲身踩坑多种方法帮你解决 Failed to decode downloaded font VUE 引入字体没有效果,vue.js,前端,javascript

参考：参考链接

尝试方法2

要让font-family的名称和字体文件打开后显示的名字一样。

亲身踩坑多种方法帮你解决 Failed to decode downloaded font VUE 引入字体没有效果,vue.js,前端,javascript
就是要那两个名称一样，但是对我依然无效。

尝试方法3

网络请求中没有对应字体文件的请求操作。
有可能字体文件是损坏的。所以可以在浏览器的控制台里面看一下，网络请求是否成功了。

亲身踩坑多种方法帮你解决 Failed to decode downloaded font VUE 引入字体没有效果,vue.js,前端,javascript

比如说我这里，就是成功的。此外还可以在控制台-源代码里面查看一下，是否加载成功了。

亲身踩坑多种方法帮你解决 Failed to decode downloaded font VUE 引入字体没有效果,vue.js,前端,javascript
最开始我以为，这里可以实时预览不同字体的样式，后来发现我错了， 我解决问题之后，这里也还是不能预览的。所以这个解决方法，只是给大家去查看一下，自己的网络请求有没有问题。

尝试方法4

有的博客说要在CSS文件里面加一个这个玩意。

Content-Type: 'application/x-font-ttf' ;

就像下面这样。但是对我来说不加也可以，所以你们可以试试。
亲身踩坑多种方法帮你解决 Failed to decode downloaded font VUE 引入字体没有效果,vue.js,前端,javascript

尝试方法5

在CSDN上已经搜遍了，我的字体还是显示不出来，所以我跑到overStack上面去看了一下，跟Vue相关的就这条。就是要在src后面加上format，但是也有人说不加也可以，唉，大家可以自己试试。

注意：如果你是.tff格式的话，才是加 format（'truetype'）

src: url('你自己的字体文件的绝对地址(相对地址)') format('truetype');

emm，还有一点，还有人说，不能用相对地址必须要用绝对地址的，可以试试。

尝试方法6

家人们，至此为止，我已经把CSDN和overstack上面几乎有关这个问题的所有回答都看的差不多了，但是还是没有解决我的问题。最后，在我快要放弃的时候柳岸花明又一村了。
emm可以看到控制台上**除了报font不能decode的错之外**，**还有一个...parser的错**，这就是关键。

亲身踩坑多种方法帮你解决 Failed to decode downloaded font VUE 引入字体没有效果,vue.js,前端,javascript
对没错，就是这个不能parse table，大家注意这个可恶的家伙
我最开始看这个玩意，以为他跟字体没关系，最后发现这个才是唯一正确的通道啊！【对我来说】

归入正题

我的字体格式是tff的，如果把字体的格式用转换器转换成.woff就解决了。什么问题都没有了。
链接：这是一个伟大的字体转换器

具体的操作很简单，就把你的字体文件扔进去，然后点一个convert就可以了。

转换好了之后，再把两个文件：woff 和woff2 都放到VScode里面。这个CSS的写法，你转换后的压缩包里面也会给你的。

亲身踩坑多种方法帮你解决 Failed to decode downloaded font VUE 引入字体没有效果,vue.js,前端,javascript
最后呢，我就成功！！终于成功！！！把字体显示了。
文章来源地址https://www.toymoban.com/news/detail-687126.html