微信小程序使用苹方字体
第一种方式,base64 encode
如果字体比较小,如各种英文字体,可以把字体上传到 Online @font-face generator — Transfonter 转换成base64格式,然后直接在样式中使用。具体使用可参考 【微信小程序】如何引入外部字体样式一文。
第二种方式,官方API
如果字体比较大,如各种中文字体动辄超过10mb,用base64显然是不合适的,小程序超过2m还要分包处理,为了一个字体实在不值当,那么可以用官方的API wx.loadFontFace加载外部字体,像这样:
1 2 3 4 5 |
wx.loadFontFace ({ family: 'PingFangSC-Medium', source: 'url("https://www.your-server.com/PingFangSC-Medium.ttf")', success: function(){console.log('load font success')} }) |
这里需要注意的一点是,family处的名称就是使用时font-family的名称,举个例子,上方加载的字体这样使用:
1 2 3 |
.foo { font-family:PingFangSC-Medium; } |
建议
由于字体可能会比较大,所以不建议在一个小程序中使用多种字体,这样会影响用户体验。为了保证界面效果,可以在onLoad周期加载字体,在success回调中执行后续操作,必要时加上Loading,让程序更加友好。
转载自:微信小程序使用苹方字体 | 黑人筆記
附 字体下载链接: 阿里云盘分享https://www.aliyundrive.com/s/4reGRugt8WE
微信小程序使用苹方字体相关推荐
- 微信小程序中引入ttf字体
微信小程序中引入ttf字体 解决常规引入ttf不生效问题 第一步:将ttf字体转为base64(转码网址:https://transfonter.org) 第二步:在static文件夹下新增font文 ...
- 【微信小程序】使用自定义字体
微信小程序使用自定义字体 文章目录 微信小程序使用自定义字体 1. 微信小程序默认支持的字体 2. 自定义字体获取 3. 文字提取和字体ttf文件压缩 4. 字体转Base64格式 5. 字体应用到小 ...
- 微信小程序使用阿里巴巴iconfont字体图标
打开阿里巴巴iconfont官网(http://www.iconfont.cn/); 把用到的字体图标加到项目里面; 进入到项目里面,选择font class方式来使用,如果没有生成过代码的同学点生成 ...
- [微信小程序]手机系统默认字体的设置
微信小程序设置手机系统默认字体 最近在写微信小程序的一个项目,但是发现字体用的不是手机系统默认的字体,这样对用户很不友好,通过下面这行样式就可以将页面的字体搞成系统默认字体了,要设置在app.wxss ...
- 微信小程序——引用阿里云字体
阿里图标官网:http://www.iconfont.cn 使用阿里云图标大致的方法就是:选中你的图标--保存至你的项目--下载你的图标项目--在项目中引用字体文件. 具体方法可以参考:引用阿里云矢量 ...
- 微信小程序离线引入 iconfont 字体图标
由于微信小程序的限制问题,我们不会像 Web 项目那样引入阿里的字体图标库,通常采用在线生成链接的方式引入. 但阿里矢量图库在 2022年 6-7月份 进行了网站维护,维护之后,不能"生成在 ...
- 微信小程序canvas怎么设置字体透明度
微信小程序自带的设置透明度只有setGlobalAlpha,但是CanvasContext.setGlobalAlpha设置透明度,是全局透明,整张图片都透明了.所以直接使用是不行的. 换种思路实现: ...
- 微信小程序:引入自定义字体
微信小程序引入外部字体 看了网上很多文章后发现可以把字体上传到https://transfonter.org/转成base64后下载下来, 引入对应css后发现太大啦, 然后在网上搜罗了一番,发现了一 ...
- 如何在微信小程序中使用.ttf字体
在小程序内,不支持使用 webfont 的 @font-face 引入本地的 ttf 等文件,这时候需要使用线上地址或者 base64. 第一步: 在阿里的iconfont中找到自己想要的字体加入购物 ...
最新文章
- 设计模式七大原则(C++描述)
- Ubuntu14.04 + Matlab2014a + caffe + cuda + cudnn环境搭建
- HLS Pargmas(2) interface
- 一个简单的JDBC通用工具
- ffmpeg 纯静态编译,以及添加自定义库流程摘要
- read properties
- Vue err:This dependency was not found
- 【机器学习】标准化和归一化辨析
- Linux中service命令和/etc/init.d/的关系
- 高德地图--根据地理位置获取经纬度
- 三年开发三年管理,三个月努力5A成绩通过PMP就在51CTO!
- 线与逻辑与OC门、OD门关系
- 自然语言处理的学习心得
- android多媒体stagefright框架,Android多媒体框架下Stagefright的功能扩展.PDF
- 数据库MySQL中更新数据库update
- 如何从shutterstock下载无水印图片
- centos安装git时出错提示make[1]: *** [perl.mak] Error 2 make: *** [perl/perl.mak] Error 2
- 微信小程序+PHP 从零写一个微信小程序
- 洛谷【T279725】搬砖
- 如何打包谷歌浏览器Chrome的扩展程序