【自用】Vue项目中使用自定义字体样式
步骤一:拿到自定义字体包首先要得到自定义字体包(后缀名为.ttf, .otf, .eot等格式的字体包),可自行下载也可以问UI要字体包。步骤二:在项目文件夹中进行放置自定义字体包的配置在项目assets文件夹下新建font文件夹,将拿到的字体包放在font文件夹中;新建一个font.css文件步骤三:font.css文件配置在font.css文件中定义所用字体@font-face {font
·
步骤一:拿到自定义字体包
首先要得到自定义字体包(后缀名为.ttf, .otf, .eot等格式的字体包),可自行下载也可以问UI要字体包。
步骤二:在项目文件夹中进行放置自定义字体包的配置
- 在项目assets文件夹下新建font文件夹,将拿到的字体包放在font文件夹中;
- 新建一个font.css文件
步骤三:font.css文件配置
在font.css文件中定义所用字体
@font-face {
font-family: 'ZI DING YI'; /* 重命名字体名 */
src: url('ZI DING YI.TTF');
font-weight: normal;
font-style: normal;
}
步骤四:在app.vue中引入font.css
<style lang="scss">
@import './assets/font/font.css';
#app {
font-family: 'PingFang-RE';
font-weight: 400;
}
</style>
更多推荐
已为社区贡献4条内容
所有评论(0)