当前位置:   article > 正文

微信小程序中使用字体库_小程序使用自定义字体库_小程序使用字体

小程序使用字体

一、使用前端字体库

小程序前端默认不支持woff2/woff文件加载。但浏览器支持base64编码图片解析。

处理方案蒋woff2转码成base64编码即可。

自定义前端库使用阿里iconfont的即可:

iconfont-阿里巴巴矢量图标库

使用步骤如下:

1.下载字体库

2.引入css,文件名改成wxss

3.修改字体文件编码,添加到wxss文件中

使用工具

图片文件转Base64字符串,图片文件转DataURL - 微工具集
任意文件转base64-直接拖进来

4.项目中使用

app.wxss中引入:

  1. @import "./style/common.wxss";
  2. @import "./style/iconfont.wxss";
  3. page{
  4. font-size:15px;
  5. }

wxml中使用:

  1. <view class="container">
  2. <text class="iconfont icon-play"></text>
  3. <view>
  4. <icon class="iconfont icon-add"></icon>
  5. </view>
  6. </view>

预览效果:

二、使用服务器端字体库

使用服务器端的woff2/woff字体库,加载有延迟。

将woff2/woff文件,上传到自己的服务器上;

或者使用阿里iconfont的在线连接。

重点:

@font-face 的 url使用服务器连接,不使用本地连接。

更多:

小程序消息推送配置 Token校验失败,请检查确认

小程序支付管理-新版支付对接流程

小程序IOS安全区问题处理整理

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/Gausst松鼠会/article/detail/509017
推荐阅读
相关标签
  

闽ICP备14008679号