引入字体的步骤
- 前言
- (步骤一)引入的文件
- `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
javascript">//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);
}
(步骤三) 全局引入
javascript">//main.js
import './assets/font/font.css'
在使用的地方的展示
javascript"> .header {font-family: YouSheBiaoTiHei;font-size: 40px;}