uni-app|uniapp微信小程序引入第三方字体库微信|vue.js|uni-app|小程序

【uni-app|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) } })