vue项目中应用自定义的字体

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

vue项目中应用自定义的字体

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.刷新项目，直接使用即可。

vue项目中应用自定义的字体