uniapp引入字体文件

转换地址点我进去将下载好的字体放进项目中 static里面文件大于40kb需要转成base64格式转换完之后把代码复制下来新创建一个css 然后copy进去@font-face {font-family:'itemfont';src: url(data:application/font-ttf;charset=utf-8;base64,我所在的位置把转换后的代码全部copy进来}App.vue

等风也在等着你

2796人浏览 · 2021-06-18 10:06:14

等风也在等着你 · 2021-06-18 10:06:14 发布

将下载好的字体放进项目中 static里面的 ttf文件大于40kb需要转成base64格式
转换完之后把代码复制下来新创建一个css 然后copy进去

在这里插入图片描述

@font-face {
   font-family:'itemfont';
   src: url(data:application/font-ttf;charset=utf-8;base64,我所在的位置把转换后的代码全部copy进来
}

在这里插入图片描述

App.vue引入css

<style lang="scss">
	@import './static/font/font.css';
</style>

页面中使用

路径必须使用~@
在这里插入图片描述

<style lang="scss">
   @font-face{
   	font-weight: 'itemfont'; // 给字体起个名字
   	src:url('~@/static/font/DINCondensed.ttf'); 
   }
   .L1_time {
   		margin: 40rpx 0 10rpx 0;
   		font-size: 46rpx;
   		// 这里这里
   		font-family: itemfont;
   		font-weight: bold;
   	}
</style>

在这里插入图片描述
需要注意项

bases64转换地址点我进去
 uniapp官网字体引入规则点我进入
在这里插入图片描述

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^