900字范文,内容丰富有趣,生活中的好帮手!
900字范文 > 如何在微信小程序中使用.ttf字体

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

时间:2022-07-17 15:42:44

相关推荐

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

在小程序内,不支持使用 webfont 的 @font-face 引入本地的 ttf 等文件,这时候需要使用线上地址或者 base64。

第一步:

在阿里的iconfont中找到自己想要的字体加入购物车 /

点击下载代码;解压文件

正常使用方法是引用iconfont.css文件就好了,但是在小程序里面无法引用 .ttf 文件。

第二步:

通过/ 将.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之类的图片转换为字体图标

① 想将图转换为svg格式

②https://icomoon.io/app/#/select 将svg转换为ttf格式

③通过/ 将.ttf文件转换为base64文件

继续上面步骤

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。