在vue项目中导入本地字体

1.准备文件

       准备好字体的ttf文件，没有的自己去网上下载几个。
        比如我在千图网下载如下一个字体。

图1.字体举例

2.粘贴到项目中

        把文件粘贴到合适的目录下，我放在了static/font下。如图。并准备好font.css作为汇总

图2.存放目录

3.汇总成css

        编辑font.css，如图
        font-family: '自定义的字体名';
        src: url('../static/ichimirate.ttf');    //字体ttf文件的位置
        

图3.汇总css

4.底层导入css

        一般在App.vue中导入font.css

图4.导入css

5.效果展示

        我们直接在style里定义新的font-family就可以用了，如下方图文。这是我的简书的二维码。
        <p style="width: 150px;font-family: ichi-mira;">手机打开微信扫描..........</p>

图5.我的简书文集二维码