VUE - 自定义字体

VUE - 自定义字体

文中以 HYAlzheimer.ttf 字体为例

1. 下载字体，复制到项目中 assets / font 文件夹下 

 

 

 创建 font.css 文件

@font-face {
  font-family: 'HY';
  src: url('HYAlzheimer.ttf');
  /* font-weight: normal;
  font-style: normal; */
}

 

 

全文引用，在main.js 中引用

import './assets/font/font.css' //全局使用

 

 

vue文件中使用

  .c_title0 {
    display: flex;
    justify-content: space-between;
    font-family: HY,cursive;
    color: #41416e;
    font-weight: 400;
    font-size: 20px;
    line-height: 20px;
  }

 

 

样式效果：