vue全局使用字体

引入字体

在src/assets/fonts/目录下添加字体文件，如：DIN_Alternate_Bold.ttf,并且同级新建font.css内容如下:

/* 阿里巴巴字体图标 */
@font-face {
  font-family: 'iconfont';  /* Project id 4683425 */
  src: url('./font_4683425_5cunxidjme2.woff2') format('woff2'),
       url('./font_4683425_5cunxidjme2.woff2') format('woff'),
       url('./font_4683425_5cunxidjme2.ttf') format('truetype');
}

/* 对阿里巴巴字体图标全局定义使用 */
.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}


/* 自定义字体引入使用 */
@font-face {
    font-family: "Alternate";
    src: url('./DIN_Alternate_Bold.ttf');
    font-weight: normal;
    font-style: normal;
    padding: 0;
    margin: 0;
  }
  @font-face {
    font-family: "Condensed";
    src: url('./DIN_Condensed_Bold.ttf');
    font-weight: normal;
    font-style: normal;
    padding: 0;
    margin: 0;
  }

  @font-face {
    font-family: "PlusJakartaSansBold";
    src: url('./PlusJakartaSans-Bold.ttf');
    font-weight: normal;
    font-style: normal;
    padding: 0;
    margin: 0;
  }

  @font-face {
    font-family: "PlusJakartaSansLight";
    src: url('./PlusJakartaSans-Light.ttf');
    font-weight: normal;
    font-style: normal;
    padding: 0;
    margin: 0;
  }
  @font-face {
    font-family: "PlusJakartaSansMedium";
    src: url('./PlusJakartaSans-Medium.ttf');
    font-weight: normal;
    font-style: normal;
    padding: 0;
    margin: 0;
  }
  @font-face {
    font-family: "PlusJakartaSansRegular";
    src: url('./PlusJakartaSans-Regular.ttf');
    font-weight: normal;
    font-style: normal;
    padding: 0;
    margin: 0;
  }

  .dinAlternateBold {
    font-family: Alternate;
  }
  .dinCondensedBold {
    font-family: Condensed;
  }
  .plusJakartaSansMedium{
    font-family: PlusJakartaSansMedium;
  }
  .PlusJakartaSansBold{
    font-family: PlusJakartaSansBold;
  }
  .PlusJakartaSansRegular{
    font-family: PlusJakartaSansRegular;
  }

全局引入项目

在src/main.js中引入字体文件，如下：

import '@/assets/fonts/font.css'

在.vue文件中使用

<style>
 .box{
    font-family: PlusJakartaSansRegular;
  }
</style>