菜鸡随笔之新字体添加
记录在没事干瞎写的时候学到的字体添加。
1、下载字体。
找美工要或者自己去相应的网站上下载所需字体。
2、创建文件。
在 assets 目录中创建 fonts 目录,在fonts目录中在创建样式文件 fonts.css 以及用于存放字体的 fontFigure(名字随意)文件夹,具体如下:
|-- assets
|-- fonts
|-- fonts.css
|-- fontFigure
|-- cinecaption227.TTF
|-- 千图笔锋手写体.ttf
3、添加字体
(1)将下载好的字体存放到 fontFigure 文件夹中。
(2)font.css 样式文件代码:
@font-face {
font-family: qtbf_write;
src: url("../fonts/fontFigure/千图笔锋手写体.ttf");
font-weight: normal;
font-style: normal;
}
ps:如果是添加多个字体,目前我的方法是:
@font-face {
font-family: Snickles;
src: url("../fonts/fontFigure/cinecaption227.TTF");
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: qtbf_write;
src: url("../fonts/fontFigure/千图笔锋手写体.ttf");
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: qh-Regular;
src: url("../fonts/fontFigure/演示秋鸿楷.ttf");
font-weight: normal;
font-style: normal;
}
(3)在main.js中注册
import "@/assets/fonts/fonts.css";
(4)调用
.system_name_title {
height: 100%;
padding: 0 1rem;
display: flex;
align-items: center;
font-size: 2rem;
font-weight: bolder;
font-family: qh-Regular;
}
(5)效果展示
对比原版:
字体原版:
自己系统:
完事,收工!(๑╹◡╹)ノ"""
新手理解,若有误,请各位大佬指点,Thanks♪(・ω・)ノ