1.下载ttf文件,保存到assets/css/font里面,在css下面新建font.css。

8020135f771c285e66f6c342f28c6361.png

2.font.css内容:在这,有些ttf的格式可能不对,在项目中用不了,我一般去https://www.fontke.com/tool/convfont/这里转换一下,可直接复制css代码到font.css中。

@charset "UTF-8";

@font-face {

font-family: "MFMingHei_Noncommercial-Regular"; // 自己取的名字,项目中可运用

src: url("font/明黑.ttf") format("truetype");

font-weight: normal;

font-style: normal;

}

@font-face {

font-family: "PingFangSC-Regular";

src: url("font/PingFangSCRegular.ttf") format("truetype");

}

3.全局引用,你可以在App.vue引入,也可以在public.css下面引用,因为我public在main.js中引用了的,所以能全局使用。

在public.css中:

/* 字体样式 */

@import 'font.css';

在main.js中:

// 使用 自定义公共CSS

import '@/assets/css/public.css'

4.刷新项目,直接使用即可。

c90a31b5ed907d8c9dfba72283b3d05d.png   

8e5fb125e140fadf8eaf82d50c04d857.png

Logo

前往低代码交流专区

更多推荐