uniapp中引入字体本地和在线引入。

2024-06-26 21:27| 来源: 网络整理| 查看: 265

本地字体文件小于40kb，直接引入使用。

在字体文件小于 40kb 时，uni-app 会自动将其转化为 base64 格式；

@font-face{ font-family: 'YouSheBiaoTiHei'; src: url('~@/static/font/YouSheBiaoTiHei-2.ttf'); } /*使用*/ .test{ font-family:YouSheBiaoTiHei; } 本地字体文件大于40kb，先将字体文件转换为base64，再引入使用。

使用的字体是ttf格式的，引入方式使用css。格式转换base64地址

1.点击上传本地的字体文件

在这里插入图片描述转换后的base64文件,点击SELECT ALL，然后ctrl+c复制下。就到粘贴版了。

2. 点击下方的css中Base64的使用

在这里插入图片描述引入的是ttf格式的字体文件，so选择最后一行的代码，新建一个css文件，将这段代码复制过去。

在这里插入图片描述

YouSheBiaoTiHei.css文件在这里插入图片描述在页面中引入并使用。

/* 字体样式 */ @import url('~@/static/font/YouSheBiaoTiHei.css'); .test{ font-family:YouSheBiaoTiHei ;//你的字体名字 font-size: 48rpx; text-align: center; margin-top: 100rpx; }

在这里插入图片描述

本地引入字体文件太大，可以将字体文件放到服务器上，在线引入使用。 @font-face { font-family: 'iconfont'; src: url('https://at.alicdn.com/t/font_865816_17gjspmmrkti.ttf') format('truetype'); } .test { font-family: iconfont; margin-left: 20rpx; }

【本文地址】

公司简介

联系我们