微信小程序 使用特殊字体的两种方法
微信小程序中如何使用特殊字体
我有两种方法:
1. 转base64格式
- 下载要使用的字体,建议TTF格式
- 打开网站 https://transfonter.org/ 转换格式,得到压缩包
- 将压缩包解压后,把stylesheet.css的内容复制到小程序的公共样式,就可以使用了
个人不建议用转base64格式的方式,不仅麻烦,而且还占内存。会有一些特殊字体会有几兆,不靠谱。
这是其它码友对这种方式的详细说明:https://www.jianshu.com/p/cc4e008e4e4c
2. 动态加载网络字体(推荐使用)
动态加载网络字体。文件地址需为下载类型。iOS 仅支持 https 格式文件地址。
wx.loadFontFace({family: 'HYQH-50S',source: 'url("https://www.xxx.com/font/HYQH-50S.ttf")',success: function (res) {console.log(res.status)},fail: function (res) {console.log(res.status)},complete: function (res) {console.log(res.status);}
});
关于字体链接source
,需要注意几个点:
- 字体链接需为下载类型
- 字体链接必须是https(ios不支持http)
- 字体链接必须是同源下的,或开启cors支持
使用方式也很简单,直接再css设置font-family
就可以了
view {font-family: "HYQH-50S" !important;
}
详见官方文档:https://developers.weixin.qq.com/miniprogram/dev/api/wx.loadFontFace.html
微信小程序 使用特殊字体的两种方法相关推荐
- 微信小程序转二维码两种方法
话不多说,直接上干货 第一种方法: 首先,你需要在电脑上打开https://mp.weixin.qq.com注册一个个人微信订阅号, 其次,登陆微信电脑版,微信号关注你注册的订阅号,这是重点 注册好了 ...
- 微信小程序使用自定义字体的三种方法
一.loadFontFace接口 小程序官方提供的接口,最便捷的加载字体的方法,不过限制颇多.必须https且同源,canvas等原生组件不支持.注意!!使用本地文件无效,必须使用网络地址. 官方文档 ...
- 小程序获取用户信息的两种方法
小程序获取用户信息的两种方法 第一种使用 getUserProfile 代码示例 第二种使用 头像昵称填写 相信大家之前也经常使用open-data获取用户的头像和昵称吧,但微信的这个改编意味着我们要 ...
- 微信小程序如何导入文件的一种方法
微信小程序如何导入文件的一种方法,前三条才是有用的信息 1 环境 2 当你看到好的demo想在自己的小程序试试的时候 3 解决方式,进入本地文件夹直接复制 新的改变 功能快捷键 合理的创建标题,有助于 ...
- 做一个微信小程序需要多少钱?两种示例
在需求明确之前,做一个微信小程序需要多少钱还不清楚.我们选择了两种目前需求量很大的小程序,并推出了价格.你可以看看有没有你想要的: [服务微信小程序] 一般是订购小程序,预订小程序,常用于服装.餐厅. ...
- 微信小程序使用和天气图标的一种方法
和天气官方文档上介绍的npm导入后使用<i class="qi-xxx"></i>的方式在微信小程序上并不能使用.网上搜的博客大多也是将icon图标下载到本 ...
- 小程序设置背景图片的两种方法总结
背景图片 我们会时常遇到设置背景图片,这里简单地总结下两种方法: 1.background-image background-image,顾名思义是背景图片的意思,设置父亲元素,然后通过backgro ...
- 微信小程序获取用户信息的两种方式
1.只获取头像和昵称(不能将用户信息返回给后端) <open-data class="tx" type="userAvatarUrl"></o ...
- 微信小程序更新webview页面的三种方法
场景 在小程序其它页面做了操作,数据发生改变,回到webview页面时需要更新webview里面的数据.由于小程序没有提供与webview的实时通信能力,因此刷新页面是个可考虑的做法. 方法一 最常见 ...
最新文章
- LOST OF DETAIL!!!的数学原理
- 年会抽奖程序准备好了吗?没有的话,直接来取!
- 计算机工程类高级职称,2019年工程类中高级职称都有哪些专业?
- python安装卡在core inter_python – 如何在我的机器上安装numpy / core ...
- sklearn自学指南(part48)--截断奇异值分解和潜在语义分析
- java ehcahce刷新_springboot结合ehcache防止恶意刷新请求的实现
- Windows安全配置加固
- winform Combobox出现System.Data.DataRowView的解决的方法
- PyTorch实战福利从入门到精通之九——数据处理
- linux 网络定时断链,客户端连接linux经常间隔性断开链接
- 彻底告别“人工+Excel”低效模式,传统制造业实现“一站式”数据化管理
- 查找子字符串----KMP算法深入剖析
- 搞定操作系统面试,看这篇就够了(二)
- android 双清菜单,什么是双清?如何双清手机?安卓手机双清教程
- vmware安装win7 vmware tools
- 生物信息常用网站(数据库)
- python电子病历,如何在电子病历上安装软件包
- 终于找到了T5L串口屏按键值不能上传的原因
- 平板电脑如何蓝牙和手机配对_如何将蓝牙设备与计算机,平板电脑或手机配对...
- 算法优秀书籍汇总---学习路线图