vue项目引入比较独特的字体的方法

引入字体的步骤

• 前言
• • （步骤一）引入的文件
  • • `OPPOSans-M.ttf,TencentSans-W3.ttf,TencentSans-W7.ttf,YouSheBiaoTiHei.ttf`
  • (步骤二)font.css
  • [(步骤三) 全局引入](#(步骤三) 全局引入)
  • 在使用的地方的展示
  • 效果展示

前言

公司这边开发一个可视化大屏，UI小姐姐设置了很多比较个性的字体，直接在代码中写入字体名称，字体并没有发生变化，感觉很奇怪，最后上网查资料得知，有些字体需要引入相应的文件才能正确显示

（步骤一）引入的文件

OPPOSans-M.ttf,TencentSans-W3.ttf,TencentSans-W7.ttf,YouSheBiaoTiHei.ttf

(步骤二)font.css

//font.css
@font-face {
    font-family: 'TencentSans';
    src: url(./TencentSans-W7.ttf);
}

@font-face {
    font-family: 'TencentSans-W3';
    src: url(./TencentSans-W3.ttf);
}

@font-face {
    font-family: 'YouSheBiaoTiHei';
    src: url(./YouSheBiaoTiHei.ttf);
}
@font-face {
    font-family: 'OPPOSans';
    src: url(./OPPOSans-M.ttf);
}

(步骤三) 全局引入

//main.js
import './assets/font/font.css'

在使用的地方的展示

 .header {
      font-family: YouSheBiaoTiHei;
      font-size: 40px;
      }

效果展示