uniapp微信小程序引入第三方字体库

前言

最近在使用第三方字体库，然后发现使用uniapp做小程序时引入第三方字体库有着挺多坑，收集了一些网上的资料，我大概整理下，防止以后继续踩坑

这是uniapp官网的引入字体图标方法

字体引入

从css本地加载

App.vue

 @font-face{font-family: 'web-font';src: url('~@/style/font/iconfont.ttf');}/*使用*/.test{font-family:YouSheBiaoTiHei;}

注意点

1.需要用*~@* 将路径添加完整
2.这里h5是可以的，但是小程序不行，理由前面图第三点有。
3.css文件不应该放在static目录下。static下是纯静态文件，不走编译的。而css是需要编译的。scss更是需要预编译的，只能在源码里有，不可能在最终Build结果里有。至于字体，微信根本不支持本地字体文件，是uni-app把小于40k的字体编译为base64了。你把字体文件放到static目录下，导致又copy了一份多余文件。

CSS远程加载

App.vue文件

@font-face{font-family: font-name;src:url('https://XXXXX/font.ttf');
}

这个放好好处是不占用空间大小，但是字体文件太大也不行,这里别人说小程序不行，我引入的就可以用

 /* 字体封装 */@font-face {font-family: "blod";src: url('https://static.heytea.com/taro_trial/v1/font/WenYue-XinQingNianTi-NC-W8_1.otf');}/* END *//* 使用 */.main-title {font-family: 'blod';}/* END */

CSS本地引入base64的CSS文件

这个是把下载下来的字体文件通过网站转换成base64
下载下来，

把转换后文本框里面的全部复制，新建一个css文件放进去

然后在App.vue里面全局引入就可以使用了
这里引入的css文件有时候可能特别大，因为你的字体比较多，建议使用这个网站在线取字体提取自己需要的字体就行

然后再去转换为base64格式就行了

使用API uni.loadFontFace()

uni.loadFontFace({family: '中英文都可',source: `url('${host}/static/xxx/xxx.ttf')`,success() {console.log('success')},fail(res) {console.log('fail',res)}})

跨域解决

Header("Access-Control-Allow-Origin: *");
Header("content-type: font/ttf");

设置完, 就可以用了

总结：因为是项目需求才引入的，成功了之后就停止，只大概测试了h5和小程序端，仅做参考