基于uni-app的微信小程序引入字体文件

本文介绍了如何在uni-app中引入自定义字体文件,包括CSS和JS两种方法,并解决了安卓机型下小程序字体不生效的问题,通过配置Nginx实现跨域。同时,文中提示uni-app的loadFontFace接口需在特定场景下使用。
部署运行你感兴趣的模型镜像
  1. 上传字体文件至服务器或者oss(也可以引入第三方,需支持nginx跨域)
  2. 引入字体文件(两种方法)
    • css引入

      @font-face {
        font-family: 'fontFamily';
        src: url("https://xxxxxxx/fontFile.ttf?_=2019121810"); 
        /* 小程序似乎只支持线上文件的引入,文件还不能过大*/ 
      }
      .test{
      	font-family: fontFamily;/* 不需要引号 */
      }
      
    • js引入

      let [err, res] = await uni.loadFontFace({
      	family: 'fontFamily', 
      	source: 'url("https://xxxxxxx/fontFile.ttf?_=2019121810")'
      });
      // 使用是和css引入一样的 font-family: fontFamily;
      

tip:uni-app的文档上说loadFontFace接口引入字体需要在app.vue,而我在app.vue上使用并没有返回值,在需要引入的页面的onload函数中使用才成功

  1. 配置Nginx跨域(解决安卓机型小程序字体没生效的问题),成功后headers会有如下项
location ~* \.(eot|ttf|woff|woff2|svg)$ {
	root /data/youzan/;
	add_header Access-Control-Allow-Origin *;
}

跨域配置

到这里就大功告成啦!

效果图

您可能感兴趣的与本文相关的镜像

ACE-Step

ACE-Step

音乐合成
ACE-Step

ACE-Step是由中国团队阶跃星辰(StepFun)与ACE Studio联手打造的开源音乐生成模型。 它拥有3.5B参数量,支持快速高质量生成、强可控性和易于拓展的特点。 最厉害的是,它可以生成多种语言的歌曲,包括但不限于中文、英文、日文等19种语言

评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值