font-spider压缩文字

最新推荐文章于 2024-07-24 23:00:08 发布

bobringtheboys

最新推荐文章于 2024-07-24 23:00:08 发布

阅读量248

点赞数 6

文章标签：前端

本文链接：https://blog.csdn.net/bobringtheboys/article/details/137145387

版权

== FZLanTingHei-DB-GBK是我引入的字体包名字==

1.安装依赖

建议全局安装但是要注意npm配置我配成了_globel 真是沙雕

npm install font-spider -g

2. 在static文件夹新增一个文件夹font-spider

同时在font-spider文件夹里面新增index.css和index.html

index.css

@font-face {
  font-family: 'FZLanTingHei-DB-GBK';
  src: url('../fonts/FZLanTingHei-DB-GBK.ttf') format('truetype');
  ==注意只有在fonts文件下有这个字体才可以哦 ==
  ==fonts自己建就好了 也不一定必须叫fonts==
}

body {
  font-family: FZLanTingHei-DB-GBK;
}

index.html-

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./index.css" />
  </head>
  <body style="font-size: 26px">
    FONTSPIDERfontspider蜘蛛字体压缩  (这里面就是我要压缩的字体 只有在这里面的内容字体才会生效)
  </body>
</html>

3.在项目根目录执行提取命令：

你的项目根目录>font-spider ./static/font-spider/index.html

4.创建font.css声明字体

在这里插入图片描述
当然我这里叫font你可以自己取名字,

@font-face {
  font-family: 'FZLanTingHei-DB-GBK';    
  src: url('./FZLanTingHei-DB-GBK.ttf?v=1.0.0') format('truetype');

  /* font-weight: normal;
  font-style: normal; */
}