Vue3 如何引入第三方字体

本次采用的免费字体是阿里巴巴的iconfont，商用免费的，废话不多说，开始今天的教程。

HaushoLin

5060人浏览 · 2022-12-02 15:58:06

HaushoLin · 2022-12-02 15:58:06 发布

本次采用的免费字体是阿里巴巴的iconfont，商用免费的，废话不多说，开始今天的教程

2、选择符合你要求的字体，字体包下载

在这里插入图片描述

3、如何使用

1、解压，然后到项目的assets中创建font文件夹，把解压包中你要用的字体放进font文件夹中

例如：我选的字体是 Alibaba_PuHuiTi_2.0_55_Regular_55_Regular
在这里插入图片描述

2、创建font.css文件并引入

font-family对应你用的字体名称


@font-face {
    font-family: "Alibaba_PuHuiTi_2.0_55_Regular_55_Regular";
    src: url('./Alibaba_PuHuiTi_2.0_55_Regular_55_Regular.ttf');
    font-weight: normal;
    font-style: normal;
  }

3、进入App.vue

给根标签app使用，代表整个项目都用这个字体

#app {
  font-family: "Source_Han_Serif_CN_VF_Regular";
}

4、实践验证

在这里插入图片描述
ok，轻松拿下。

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