菜鸡随笔之新字体添加

2022-04-01 15:34:03 阅读：165 来源： 互联网

标签：fontFigure 随笔 -- fonts 之新字体菜鸡 font css

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

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;
}

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

对比原版：

字体原版：

自己系统：

完事，收工！(๑╹◡╹)ﾉ"""

标签：fontFigure,随笔,--,fonts,之新,字体,菜鸡,font,css
来源： https://www.cnblogs.com/beheTea/p/16087188.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

菜鸡随笔之新字体添加