一. 介绍和下载字体
字体版本及字重
苹方-简 常规体
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;
二. 使用
- 在 assets 文件下新建 fonts 目录用来存放字体所需要的文件.
- fonts目录下包含两个文件:
- 自己新建一个 font.css 文件.
- 添加以.ttf 结尾的字体文件
- font.css中需要写入
@font-face {
font-family: 'PingFang-SC-Medium'; // 以后在 CSS 使用该字体的样式, 文件名可以自定义
src: url("/assets/fonts/PingFangSC-Medium.ttf"); // 要指向字体文件的路径
}
- 在 APP.vue的style中引入font.css, 以此来实现全局文件都可使用.
在APP.vue文件中
<style lang="scss">
// 引入全局 CSS 文件
@import "@/assets/fonts/font.css";
</style>
- 至此就可以在各自单独的页面的 CSS使用
在 test.vue 使用
.txt {
font-family: 'PingFang-SC-Medium';
}
参考图例:
image.png
image.png
