廊坊电商网站建设,企业营销运营,网站首页广告代码,网站建设及营销方案base64 形式引入
首先我们点击 iconfont 项目中的 项目设置 按钮#xff0c;位置如下图所示#xff1a; 我们勾选图中所示三种字体格式#xff0c;选择 base64 是为了将另外两种字体转为 base64 形式#xff0c;而选择 woff 与 ttf 字体原因如下#xff1a;
TTF 兼容性更…base64 形式引入
首先我们点击 iconfont 项目中的 项目设置 按钮位置如下图所示 我们勾选图中所示三种字体格式选择 base64 是为了将另外两种字体转为 base64 形式而选择 woff 与 ttf 字体原因如下
TTF 兼容性更好缺点是字体文件体积大WOFF 与 TTF 字体相比体积小且表现性好WOFF2 字体是对 WOFF 字体的升级但兼容性欠佳。
微信的官方文档中也建议选择以上两种字体 建议格式为 TTF 和 WOFFWOFF2 在低版本的 iOS 上会不兼容。 我们再次下载设置后的字体图标文件并将 iconfont.css 重命名为 iconfont.wxss因为下载的文件已将字体转为 base64 格式放入到 iconfont.wxss 中所以我们只需要将 iconfont.wxss 文件复制到项目中即可如下图所示 虽然 base64 形式会增加约 1/3 的体积但在少量图标的情况下我更推荐这种方式引入增加新图标时也只需要替换该文件即可且由于会编译到小程序包文件中不会出现外链形式在弱网或加载失败时图标显示为方框所有字体找不到对应字符编码文件时都会显示成这样的问题。
2. 代码示例
字体图标使用很简单代码如下 text classiconfont icon-xxx /
