vue項目中應用自定義的字體

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

 

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