微信小程序> 如何在微信小程序中使用.ttf字体

如何在微信小程序中使用.ttf字体

浏览量:5583 时间: 来源:Ordinary-life

在小程序内,不支持使用 webfont 的 @font-face 引入本地的 ttf 等文件,这时候需要使用线上地址或者 base64。
第一步:
在阿里的iconfont中找到自己想要的字体加入购物车 http://iconfont.cn/
小程序
点击下载代码;解压文件
小程序
正常使用方法是引用iconfont.css文件就好了,但是在小程序里面无法引用 .ttf 文件。

第二步:
通过https://transfonter.org/ 将.ttf文件转换为base64文件
小程序
1:点击Add fonts  找到iconfont中下载解压的文件中找到:iconfont.ttf
2:将 Base64 encode选中
3:选择被转换文件的格式
4:点击Convert
完成之后出现下面Download 点击下载,解压就好了
小程序
三:在微信小程序中使用
可以在需要使用的文件中新建 fontAwesome.wxss文件
1、将转换之后的stylesheet.css内容拷贝到fontAwesome.wxss文件中;
2、将第一步阿里下载的iconfont.css文件中的,除了下图@font-face红色区域的   内容不要 其他的都内容都拷贝到fontAwesome.wxss文件中;
小程序
3、在需要使用的pages或者components中.wxss文件中引入新建的
@import '路径/fontAwesome.wxss’文件,在wxml文件中使用对应的class就ok。

其他:将png或者jpg之类的图片转换为字体图标
①jinaconvert.com  想将图转换为svg格式
②https://icomoon.io/app/#/select 将svg转换为ttf格式
③通过https://transfonter.org/ 将.ttf文件转换为base64文件
继续上面步骤

版权声明

即速应用倡导尊重与保护知识产权。如发现本站文章存在版权问题,烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至197452366@qq.com ,我们将及时处理。本站文章仅作分享交流用途,作者观点不等同于即速应用观点。用户与作者的任何交易与本站无关,请知悉。

产品经理

手机 : 13312967497

擅长 : 小程序流量变现

扫码领取礼包

热门模板

  • 头条
  • 搜狐
  • 微博
  • 百家
  • 一点资讯
  • 知乎