三步教你设置网站字体为苹方

看了很久还是觉得苹果的苹方字体最好看，所以今天教大家怎么把网站字体换成苹方，瞬间提高网站的观赏度。

使用教程

下载苹方ttf

网上苹方字体资源真难找啊，不是下载一堆没用的东西就是下载时需要付费。这里我就把自己现在用苹方SC分享出来，有其他好看的字体可以评论区分享出来。

链接：https://pan.baidu.com/s/1zdyhFAqtBVNpait9d4IONw?pwd=l60i

引用

这里以Vue3为示例，实际上换字体流程都大差不差。

在项目的asset目录下引入字体文件并且新建一个font.css文件。

在font.css里面添加下面代码引入字体文件。

1
2
3
4
5
6

@font-face {
    font-family: 'pingfang'; ##自定义的字体名字
    src: url('PingFang SC.ttf'); ##引入的字体文件路径
    font-weight: normal;
    font-style: normal;
  }

接着在全局引入App.vue引入字体文件，如果仅需在部分页面更改字体则在组件里面引用。

1
2
3
4
5
6

<style>
@import "./assets/font.css";
body{
    font-family: pingfang;
}
</style>

至此网站字体应该变成苹方了，可以进入我的网站看实际效果爱加班的小刘 (xiaoliu.life)。