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和小程序端,仅做参考

  • 2
    点赞
  • 28
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值