一. 介绍和下载字体

PingFangSC 多版本字体文件下载

字体版本及字重

苹方-简 常规体
font-family: PingFangSC-Regular, sans-serif;

苹方-简 细体
font-family: PingFangSC-Light, sans-serif;

苹方-简 中黑体
font-family: PingFangSC-Medium, sans-serif;

苹方-简 极细体
font-family: PingFangSC-Ultralight, sans-serif;

苹方-简 中粗体
font-family: PingFangSC-Semibold, sans-serif;

苹方-简 粗体
font-family: PingFangSC-Bold, sans-serif;

二. 使用

1. 在 assets 文件下新建 fonts 目录用来存放字体所需要的文件.
2. fonts目录下包含两个文件:
   • 自己新建一个 font.css 文件.
   • 添加以.ttf 结尾的字体文件
3. font.css中需要写入

@font-face {
    font-family: 'PingFang-SC-Medium';    // 以后在 CSS 使用该字体的样式, 文件名可以自定义
    src: url("/assets/fonts/PingFangSC-Medium.ttf");  // 要指向字体文件的路径
}

4. 在 APP.vue的style中引入font.css, 以此来实现全局文件都可使用.

在APP.vue文件中

<style lang="scss">
// 引入全局 CSS 文件
@import "@/assets/fonts/font.css";
</style>

5. 至此就可以在各自单独的页面的 CSS使用

在 test.vue 使用
.txt {
font-family: 'PingFang-SC-Medium';
}

参考图例:

image.png

image.png