跨境电商多平台运营_成都网站制作计划_seo外包服务公司_网站关键词如何优化

前言

公司这边开发一个可视化大屏，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;}

效果展示