UNI-APP引入第三方字体库问题

一、背景描述

在开发APP的时候，经常需要引入第三方字体图标，由于第一次使用UNI-APP这一前端混合框架做APP开发，在引入阿里巴巴矢量图标库不小心踩到了坑。

二、问题描述

VM176:5 Failed to load local font resource /static/iconfont/iconfont.ttf-do-not-use-local-path-./common/main.wxss&18&7 
 the server responded with a status of 404 (HTTP/1.1 404 Not Found) 

三、问题解决

由提示得知，引入的iconfont.ttf文件没找到，以下是出错时的目录结构及iconfont.css文件配置

路径应该没写错，难道是引入的字体路径在UNI-APP框架下有特殊写法？赶紧看下官方文档UNI-APP框架简介

 果然是有特别写法，而且需要注意的是iconfont.ttf需要放置到static文件夹下，官方的目录结构如下图。还好自己平时写法就是这样。(#^.^#)

 

 

修改好之后，重新编译，问题解决。

 

四、问题总结

UNI-APP在引入第三方字体库的时候，要求比较多，比如字体文件若大于40kb，需要将其装换成base64格式，我这里提供一个在线转换工具base64在线转换。后期在引入第三方字体图标的时候一定要注意。