码迷,mamicode.com
首页 > 其他好文 > 详细

使用外部字体

时间:2020-02-09 11:21:02      阅读:77      评论:0      收藏:0      [点我收藏+]

标签:ini   base   nts   配置   ram   MinIP   文件   for   conf   

微信小程序中使用漂亮的字体:

主要有以下几种方法:
1.将需要的字体转换成base64格式的css文件,像阿里字体图标iconfont使用

在字体转换网站https://transfonter.org/中,首先`Add fonts,选中Base64 encodeFormats根据你的字体格式选择,一般是TTF格式,在选择Convert`,转换好之后得到压缩包,解压后就能得到字体的css文件,可是在微信小程序这里并不适用,因为小程序的打包大小必须<2MB,这样得到的css文件都超过了体积限制,这种方法不可行

2.使用wx.loadFontFace加载外部字体
文档:https://developers.weixin.qq.com/miniprogram/dev/api/wx.loadFontFace.html

1
2
3
4
5
6
7
8
9
10
11
12
13< 大专栏  使用外部字体br/>14
wx.loadFontFace({
family: this.data.fontFamily,
source: 'url("https://sungd.github.io/Pacifico.ttf")',
success(res) {
console.log(res.status)
self.setData({ loaded: true })
},
fail: function(res) {
console.log(res.status)
},
complete: function(res) {
console.log(res.status)
}
});

3.在wxss中配置

1
2
3
4
5
/*加载网络字体*/
@font-face {
font-family: 'Bitstream Vera Serif Bold';
src: url('https://sungd.github.io/Pacifico.ttf');
}

使用外部字体

标签:ini   base   nts   配置   ram   MinIP   文件   for   conf   

原文地址:https://www.cnblogs.com/lijianming180/p/12286286.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!