vue引入自定义字体并使用

结构

font.scss引入字体

@charset "UTF-8";

@font-face{
  font-family: "caoshu";
  src: url("caoshu.ttf");
  font-weight: normal;
  font-style: normal;
}

@font-face{
  font-family: "Xingkai";
  src: url("XingKai.ttf");
  font-weight: normal;
  font-style: normal;
}

@font-face{
  font-family: "XingShu";
  src: url("XingShu.ttf");
  font-weight: normal;
  font-style: normal;
}

main.js 引入font.scss

import '@/assets/font/font.scss' // font css

使用

    .textContent {
      margin-top: 0%;
      font-family: XingShu;
    }