ICode9

精准搜索请尝试: 精确搜索
首页 > 编程语言> 文章详细

uniapp配置微信小程序的iconfont本地文件

2022-08-05 11:02:28  阅读:242  来源: 互联网

标签:scss uniapp 文件 微信 woff base64 iconfont font


一. 小程序使用本地iconfont的方案

小程序使用本地文件: 转base64或者使用线上环境
但是iconfont线上地址不允许了(有时候官方会没有的情况),只能用base64

二. 如果使用

1. 首先下载iconfont文件

2. 取出iconfont.css

取出iconfont.css 将iconfont.css变成iconfont.scss, 头部加入

// iconfont.scss
@import './woff.scss';
@font-face {
  font-family: "icon"; /* Project id 1708193 */
  src: url('data:font/truetype;charset=utf-8;base64,#{$woff}') format('truetype');
}

然后额外在项目中新增一个woff.scss文件

// woff.scss
$woff: '';

3. 取出.woff2文件

(1) 找个转base64网站: https://www.giftofspeed.com/base64-encoder/
(2) 将转换得到的base64填入woff.scss文件中的$woff:" ''中

4. 每次更换文件

重复1-3步骤

5. 优化路线

利用脚本生成对应文件

标签:scss,uniapp,文件,微信,woff,base64,iconfont,font
来源: https://www.cnblogs.com/listenMao/p/16553606.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有