6.引用外部字体

 

步骤一：下载字体；（此处下载的字体为'阿朱泡泡体.ttf'）

字如网：https://fontru.com/fonts/

 

步骤二：在assets文件夹下新建一个文件夹叫font --> 将下载好的 .ttf 字体复制到 asset/font 文件夹下 --> 然后新建一个font.css文件 --> 其中的配置如下：

@font-face {
    font-family: '阿朱泡泡体';
    src: url('阿朱泡泡体.ttf');
    font-weight: normal;
    font-style: normal;
}

 

步骤三：main.js中引入字体：

// 引入字体
import './assets/fonts/font.css'

 

步骤四：在需要改变字体的地方使用：

<div class='test'>长风破浪会有时</div>
<style scoped>
    .test {
        font-family: '阿朱泡泡体';
    }
</style>