uniapp微信小程序使用自定义字体和外部字体

这里主要介绍两个方法：
第一个是引用阿里巴巴字体库，这个方法比较简单，但是字体种类比较少。同时只适用于需要改变的字比较少的情况
第二个是利用腾讯云存储，把自己喜欢的字体下载下来，存储在腾讯云里面，这种比较麻烦，但是可以使用自己喜欢的字体。

方法一：
（1）先上传送门：https://www.iconfont.cn/fonts/index?spm=a313x.7781069.1998910419.16&keyword=&page=

（2）选择自己需要的字体，我这里选的渔阳：

（3）进入后先预览，预览的字和你后期需要改变的字必须一致，否则会没有效果。之后引用复制。

（4）直接粘贴再需要使用字体的页面，我是在index.vue里面使用的，就直接放在index.vue的style里面

（5）写样式的时候直接引用就行啦~~

（6）成功啦，效果图：（如果第 3 步预览的字不是这几个会没有效果）

方法二：
（1）先进入腾讯云官网(https://cloud.tencent.com)，搜索对象存储：

（2）点击立即使用：

（3）创建一个存储桶：

（4）创建时选择公有读，私有写：

跨域规则：

（5）上传包含woff和woff2的文件夹

我猜应该有人没有这个后缀的文件，往下看：
1.先上链接：字体天下
要啥字体自己找：

2.下载的字体时ttf格式，
再次上链接：格式转化
将得到的ttf格式转化为woff和woff2

3.OK，

（6）点击woff和woff2的详情进行引用

（7）依然是放在需要改变字体的页面，我是放在index.vue的style标签里面

替换掉里面的两个url：

@font-face { font-family: "LiShu";font-weight: 400;src: url("https://appoint-1312673561.cos.ap-nanjing.myqcloud.com/Lishu/HYf3gj.woff2") format("woff2"), url("https://appoint-1312673561.cos.ap-nanjing.myqcloud.com/Lishu/HYf3gj.woff") format("woff"); font-display: swap; }

（8）在当前页面使用（要和上面@font-face里面font-family名字一样哟）：

（9）效果图：

（10）完成啦~~

uniapp微信小程序使用自定义字体和外部字体相关推荐

uniapp 微信小程序 map自定义气泡customCallout
需求:要在marker的下方展示该站点名称,但默认的气泡是在上方,后查阅微信小程序官方文档发现marker属性有个customCallout可自定义气泡直接上代码 <template>& ...
uniapp 微信小程序导航栏设置背景颜色字体颜色
{"path": "pages/company","style":{"navigationBarTitleText": ...
微信小程序可以加服务器上的字体,微信小程序中自定义字体
微信小程序支持自定义字体开放出来也有段时间,这边整理下使用自定义字体中,容易忽略的一些问题,和简便的全局自定义方式.如果是同时加载两种字体包,先下载下来的会被后下载下来的字体包给覆盖. 官网接口文档 ...
uniapp - [微信小程序] 超详细实时录音功能，录制外部声音及播放上传到服务器（支持录音完毕生成 mp3、试听音频(带进度条)、暂停录音、重新录音、限制录音最大时长、自定义音频名称等功能）
前言网上的教程都太乱了,功能不好用且一堆 BUG,没有注释很难改造示例为自己用. 本文实现了 uniapp 微信小程序平台,授权麦克风进行录音并保存为音频的功能,内置播放器可播放录音文件, 您直接复 ...
vue uniapp 微信小程序搜索下拉框模糊搜索
vue uniapp 微信小程序搜索下拉框模糊搜索话不多说直接贴代码 template <template><view class="index"> ...
UNIAPP微信小程序使用Echarts
UNIAPP微信小程序使用Echarts 1. 前言最近要在uniapp做的小程序中使用echarts,网上搜了很多教程都很麻烦,这里提供一种简便快捷CV方案. 先说下图表选型的问题,如果你 ...
uni-app 微信小程序分享按钮
uni-app 微信小程序分享按钮官方文档说明在 manifest.json 的 App SDK 配置里,勾选微信消息及朋友圈,并填写相关 appkey,微信 appkey 在需要分享的页面填写: ...
uni-app 微信小程序 + 友盟统计 sdk
在开发小程序时,有些功能会需要统计用户点击次数.登录人数.访问时长等数据,用来分析用户的一些行为:这里分享一下用 uni-app 开发微信小程序借助友盟 SDK 在前端页面中埋点统计的实现过程: 1. ...
uniapp 微信小程序地图，在高德app、腾讯app、百度app、苹果地图app 中打开
一.效果: 点击图片一后,会跳转到图片二页面(无需自己写图片二页面,小程序会自动打开此页面) PS:示例图中(坐标)为"天安门".( <map> 可添加多个坐标点 ) ...

uniapp微信小程序使用自定义字体和外部字体

uniapp微信小程序使用自定义字体和外部字体相关推荐

最新文章

热门文章