引入字体的步骤
- 前言
- （步骤一）引入的文件
- `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;}
效果展示
