美文网首页
如何在Vue项目中使用自定义字体

如何在Vue项目中使用自定义字体

作者: 海布里的冬季 | 来源:发表于2020-09-03 08:57 被阅读0次
  1. 首先要得到自定义字体包(后缀名为.ttf, .otf, .eot等格式的字体包),可自行下载也可以问UI小姐姐要字体包,拿到字体包后进入项目中在assets文件夹下建一个fonts文件夹
  2. 把拿到的字体包放到fonts文件夹中接着创建一个fonts.css文件
  3. 在fonts.css文件中定义你所用的字体(这里以PingFang为例)
@font-face: {
    font-family: 'PingFang-RE';
  /* 重命名字体名 */
  src: url('./PingFang\ Regular.ttf');
  font-weight: normal;
  font-style: normal;
}
  1. 在app.vue中引入fonts.css
<style lang="scss">
  @import './assets/fonts/fonts.css';
  #app {
    font-family: 'PingFang-RE';
    font-weight: 400;
  }
</style>

相关文章

网友评论

      本文标题:如何在Vue项目中使用自定义字体

      本文链接:https://www.haomeiwen.com/subject/foxwsktx.html