菜鸡随笔之新字体添加

记录在没事干瞎写的时候学到的字体添加。

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)效果展示

 对比原版:

字体原版:   

自己系统: 

完事,收工!(๑╹◡╹)ノ"""

 

posted @ 2022-04-01 15:25  草莓糖&薄荷茶  阅读(79)  评论(0编辑  收藏  举报