案例演示

小程序有些字体不支持，我们如何引入，步骤如下：

第一步：下载需要的字体

第二步：如果只是用其中的数字，则需要使用工具单独再摘出来，这样文件会很小。

生成新的字体文件，此文件大小很小。

第三步：将此文件转换为base64格式

工具网址：https://www.giftofspeed.com/base64-encoder/

第四步：在项目里面使用

 @font-face {font-family: "STXingkai";src:url('data:application/x-font-woff2;charset=utf-8;base64,这个地方放置base64')}

使用

font-family: 'STXingkai';

提取工具

放资源了

uniapp微信小程序引入字体相关推荐

uniapp微信小程序引入第三方字体库
前言最近在使用第三方字体库,然后发现使用uniapp做小程序时引入第三方字体库有着挺多坑,收集了一些网上的资料,我大概整理下,防止以后继续踩坑这是uniapp官网的引入字体图标方法字体引入从c ...
uniapp微信小程序引入第三方广告插件
以Slime广告插件为例. 一.微信小程序后台申请相关插件二.manifest.json文件 "mp-weixin" : {"appid" : "* ...
基于uni-app的微信小程序引入字体文件
上传字体文件至服务器或者oss(也可以引入第三方,需支持nginx跨域) 引入字体文件(两种方法) css引入 @font-face {font-family: 'fontFamily';src: u ...
微信小程序引入字体图标
小程序与平常web开发中引入字体图标的方式不一样,必须先转为base64再引入,以阿里巴巴字体图标 http://iconfont.cn 为例: 一.去官网 http://iconfont.cn 下载 ...
uni-app 微信小程序引入iconfont
uni-app 使用iconfont 阿里图标库添加需要的图标到购物车然后添加至项目下载至本地 app.vue中全局引入生成代码替换iconfont.css部分代码前面添加https: 使 ...
微信小程序引入外部字体
微信小程序引入外部字体前言 wx.loadFontFace Base64 尾巴前言微信小程序由于打包体积限制,不支持直接引入字体文件.但是如果我们想引入自定义的字体该怎么操作了?接下来我们介绍两 ...
uniapp - 微信小程序接入腾讯视频播放器功能插件，uniapp开发微信小程序端调用引入并使用腾讯视频播放组件完整全流程（详细示例源码，一键复制开箱即用）
效果图在uniapp 微信小程序项目中,集成腾讯视频功能插件,实现播放腾讯视频效果,附带详细示例源码及注释, 你可以跟着步骤一步步来,保证几分钟就能快速在uniapp小程序项目中植入腾讯视频功能! ...
vue uniapp 微信小程序搜索下拉框模糊搜索
vue uniapp 微信小程序搜索下拉框模糊搜索话不多说直接贴代码 template <template><view class="index"> ...
小程序引入字体注意点
小程序引入字体有2种方式, 第一种是通过 @font-face ,第二种是通过小程序提供的方法 loadFontFace. 引入的方式不同但是需要注意的地方大致形同: 官方提出了以下的注意事项字体文 ...

uniapp微信小程序引入字体

案例演示

第一步：下载需要的字体

第二步：如果只是用其中的数字，则需要使用工具单独再摘出来，这样文件会很小。

第三步：将此文件转换为base64格式

第四步：在项目里面使用

提取工具

uniapp微信小程序引入字体相关推荐

最新文章

热门文章