页面中使用不同的字体样式

昨天在工作中使用了不同的字体显示，做个笔记

概览

首先需要有不同的字体，将以otf、OTF、TTF结尾的字体文件 ,放置在项目中的静态文件中，比如vue-cli中的assets目录中，然后使用less、sass、stylus等文件导入这些文件并声明字体名,然后在项目的入口文件中导入该文件，（注意url路径）即可使用该字体

一：字体

这个请自行查找，不再赘述

二：目录

字体放置在项目的静态文件目录中，新建style/common.less (笔者在该项目中使用了less,读者也可以使用别的预处理器)

less文件配置如下

// common.less
 
// 字体
@font-face {
    font-family: PingFangSC-Medium;
    // src: url('../fonts/DINPro-Black.otf');
    src: url( "../fonts/SOURCEHANSANSCN-REGULAR.OTF" );
    
   }  
//    数字
   @font-face {
    font-family: DINPro-Medium;  //这个就是以后要用到的字体名，可以自定义，但最好使用otf/ttf后缀前的字体名
    src: url('../fonts/DINPro-Medium.otf');
   }

main.js / index.js 中导入

//main.js
// 导入，注意url
import './assets/style/comm.less'

使用