Vue项目开发 引用字体包

网上查找对应字体，下载字体包，然后放进项目中

新建font.css文件引用字体包文件

/* font.css文件代码 */
@font-face {
    /*给字体命名*/
    font-family: 'HaiPai';
    /*引入字体文件*/
    src: url('./HaiPaiQiangDiaoGunShiJian-2.otf');
    font-weight: normal;
    font-style: normal;
}

main.js全局引用

//引入字体
import '@/assets/css/font.css';

页面上使用方式font-family: HaiPai

<template>
  <div class="about">
    <h1 style="font-family: HaiPai;">This is an about page</h1>
	<h1 style="font-family: HaiPai;">本月目标设定</h1>
	<h1>本周目标设定</h1>
  </div>
</template>

效果图