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

百度已收录   阅读次数: 58
2021-11-0621:19:30 发表评论
摘要

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

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

开篇寄语

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

前情提要

内容详情

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

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

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

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>

分享至:
  • 我的微信
  • 微信扫一扫加好友
  • weinxin
  • 我的微信公众号
  • 扫描关注公众号
  • weinxin

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: