微信小程序:怎么设置字体? |
您所在的位置:网站首页 › 微信很大的字怎么制作 › 微信小程序:怎么设置字体? |
今天做了一个傻的事情,在小程序加入了font-family: PingFangSC-Regular, PingFang SC;这行代码在电脑里面会正常显示,但是在手机里面不会变化的。下面将讲讲小程序里面应该怎么设置字体 1.小程序设置字体有没有效果呢?font-family: PingFangSC-Regular, PingFang SC; 如上设置,答案是没有一点效果的。 因为真机调试的时候,手机是不带PingFang 字体的。 设置字体有两种方法,但是最好的方案 是 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这么折腾无疑不是最好的选择,故首选动态加载。 |
今日新闻 |
点击排行 |
|
推荐新闻 |
图片新闻 |
|
专题文章 |
CopyRight 2018-2019 实验室设备网 版权所有 win10的实时保护怎么永久关闭 |