微信小程序:怎么设置字体?

今天做了一个傻的事情,在小程序加入了font-family: PingFangSC-Regular, PingFang
SC;这行代码在电脑里面会正常显示,但是在手机里面不会变化的。下面将讲讲小程序里面应该怎么设置字体

1.小程序设置字体有没有效果呢?

font-family: PingFangSC-Regular, PingFang SC;
如上设置,答案是没有一点效果的。
因为真机调试的时候,手机是不带PingFang 字体的。
在这里插入图片描述

2.要怎样设置才能有自己想要的字体?

设置字体有两种方法,但是最好的方案 是 js动态加载字体,然后页面引用。

js部分在onload中写下

  wx.loadFontFace({
          family: 'webfont',
          source: 'url("//at.alicdn.com/t/webfont_1f7b3qbimiv.eot")',
          success: function (res) {
              console.log(res.status) //  loaded
          },
          fail: function (res) {
              console.log(res.status) //  error
          },
          complete: function (res) {
              console.log(res.status);
          }
      });

这里引入的是阿里的思源黑体 family是自定义名字 source是地址。
小程序api上 动态加载网络字体,文件地址需为下载类型。IOS下仅支持https格式文件地址。
阿里的//因为如果地址是//开头,浏览器加载就会以当前的http前缀为基准。换句话说如果当前网页是http的,字体就会以http加载,当前网页是https的,字体就会以https加载。所以可以放心使用。

在公共样式表里写下

/* 字体 */
.web-font{
    font-family:"webfont" !important;
    font-size:16px;font-style:normal;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.2px;
    -moz-osx-font-smoothing: grayscale;
}

还有一种方法就是,下载好转base64 贴在公共样式里引用,转64的方法首先不说麻烦,其次也占内存,小程序一共只能那么几m这么折腾无疑不是最好的选择,故首选动态加载。

  • 4
    点赞
  • 43
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

程序媛夏天

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值