vue中替换全局字体

替换成可商用的字体

阿吧阿巴阿巴

4049人浏览 · 2022-10-08 16:21:38

阿吧阿巴阿巴 · 2022-10-08 16:21:38 发布

引子：工作中需要搭建一个页面，微软雅黑是不支持商用的，需要全局替换成其他字体。

文章目录

一、下载字体
二、引入字体
三、使用
- 1.在App.vue中
- 2.搜索font-family，看有没有被替换掉的字体，改过来

一、下载字体

百度搜索自行下载，这里推荐一个网站，下载可商用字体（这里选用思源字体）

字体库

下载好的字体文件如下：

二、引入字体

1.在项目资源目录下新建一个font文件夹，引入下载好的字体文件

在这里插入图片描述

2.编写css文件(这里是font.less)

在这里插入图片描述

3.引入到main.js

引入到main.js是为了方便局部调用

在这里插入图片描述

三、使用

1.在App.vue中

在这里插入图片描述

2.搜索font-family，看有没有被替换掉的字体，改过来

在这里插入图片描述

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}$/, //不连续的两位字母// /^