vue项目引入外部字体

vue项目引入字体

先看看效果图：

• 第一步：在assets下面新建font文件夹，里面两个文件,一个是css,另外一个是要使用的字体文件，ttf格式,如下是font.css:

@font-face {  
    font-family: 'kltspecial';
    src: url('./kltspecial.ttf');
    font-weight: normal;
    font-style: normal;
}

• 第二步：在入口文件引入

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

• 第三步：现在可以使用了

.box {
  font-family: 'kltspecial'; 
  font-size: 30px;
}

实际项目使用效果：