Vue.js用Cli建立的项目如何更改全局字体，可以这样操作

开篇寄语

伯衡君最近正在用Vue.js中的cli建立一个网站，准备用Vue搭建，在制作的过程中，需要进行全局字体的改变，伯衡君看了一下官方文档，只有文字叙述，而且颇为简略，于是伯衡君就想到是时候出一篇图文讲解文章，那么该如何操作呢？可以按照以下步骤进行。

前情提要

• 《科学入门Vuejs，几个小示例让你爱上它》
• 《Vuejs中各种"v-xxx"都是什么，一篇带示例的文章让你搞清楚》
• 《Vuejs中的methods, computed和watch有何妙用？》
• 《Vuejs中组件开发从初级到高级（一）》
• 《Vuejs中组件开发从初级到高级（二）》

内容详情

适用于Vue3版本，虽然Vue2与之区别不是很大。

首先是要下载字体，最好是ttc格式字体，比如苹方-简正规体PingFang-SC-Regular.ttf这个字体为例，首先是下载到本地，之后复制粘贴到Vue项目，伯衡君就在项目中的src文件夹下新建了一个名为common的文件夹，又在这个文件夹下新建了一个名为font的文件夹，之后在font文件夹下新建一个名为font.css文件以及将ttf格式字体放入其中，如下图所示：

font.css文件内可以这样写：

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

之后，就可以在文件App.vue引用了，如下图所示：

#app {
  font-family: 'PingFang';
}

<!--如果相对单个类修改，比如修改<span></span>标签字体-->

span{
  font-family: 'PingFang';
}

这样就可以达到全局引用该字体的效果了，或者也可以用样式表引入也可以，如下所示：

<style lang="less" rel="stylesheet/less">
  @import "./common/font/font.css";
</style>