Vue中 引入外部字体并使用

在vue2中引入外部字体

第一步：下载字体

第二步：在src文件夹下新建fonts文件夹，将下载的字体文件放进去，并且新建fonts.css文件夹

第三步：fonts.css文件中引入想要的字体；

/* 这是 font.css 可设置多种字体； */
/* 注意：font-family: 'XXX'; 将字体名字自定义为 XXX,使用时要用这个名字 */
/* 如果需要引入多个字体，直接在里面继续添加即可，不用另建文件 */
@font-face {
  font-family: '八大山人';
  src: url('./八大山人字体.TTF');
}
@font-face {
  font-family: 'PostNoBillsJaffna-Bold';
  src: url('./PostNoBillsJaffna-Bold.ttf');
}

第四步：main.js中引入

import './assets/fonts/fonts.css'

第五步：页面中应用

<div class="wrap">
    <div class="myfont">在 vue 组件中添加字体样式</div>
    <div class="myfont1">DigitalThick</div>
  </div>



<style scoped>
.myfont{
   /* 这里的 DigitalThick 是引入时的自定义名字 */
   font-family: '八大山人'; 
   font-size: 35px;
   color: rgb(101, 74, 223);
 }
.myfont1{
   /* 这里的 DigitalThick 是引入时的自定义名字 */
   font-family: 'PostNoBillsJaffna-Bold'; 
   font-size: 35px;
   color: rgb(180, 57, 78);
 }
</style>

第五步：效果