vue全局字体不生效的问题

今天接手了一个新项目，在熟悉项目的时候，意外发现，网站的字体和设计稿上的字体不一样。

于是查看一番之后，发现引入字体的方式错了。

原代码是这样的：

body {
  font-family: HONORSansCN-DemiBold, HONORSansCN;
  font-weight: 400;
  font-size: var(--el-font-size-base);
  color: $color-black;
  -webkit-font-smoothing: antialiased;
}

问题出在，没有引入字体。

改后：

@font-face {
  font-family: HONORSansCN;
  src: url('~@/assets/styles/fonts/HONORSansCN-Regular.ttf');//字体文件对应的位置
  font-weight: normal;
  font-style: normal;
}

body {
  font-family: HONORSansCN, HONORSansCN-DemiBold;
  font-weight: 400;
  font-size: var(--el-font-size-base);
  color: $color-black;
  -webkit-font-smoothing: antialiased;
}

虽然只是一个小问题，但这种问题其实很常见，记录下来，以后翻看~