font-spider WebFont 压缩工具

最新推荐文章于 2023-05-10 15:10:32 发布

小贤笔记

最新推荐文章于 2023-05-10 15:10:32 发布

阅读量128

点赞数

文章标签：前端 javascript html css 开发语言

本文链接：https://blog.csdn.net/shenxianhui1995/article/details/128480376

版权

下载 font-spider

npm install font-spider -g

注: 下载失败的话可使用淘宝镜像

npm config set registry http://registry.npm.taobao.org

新建一个 html 文件

注: 不要忘记引入下一步创建的 CSS 文件

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <!-- 引入css文件 -->
    <link rel="stylesheet" href="./ttf.css" />
  </head>
  <body>
    <!-- 需要转换的文字放在标签内，只能压缩静态字体 -->
    <p class="ttf">这里写入需要转换的内容</p>
  </body>
</html>

新建一个 css 文件(处理的 ttf 文件)

@font-face {
  font-family: 'source';
  /* src 引入需要精简的 ttf 字体文件 */
  src: url('./LiXuKeShuFa-1.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

.ttf {
  font-family: 'source';
}

在当前目录下执行命令

注:

路径要找对, 目标是之前创建的那个 html 文件
处理成功后, 原字体文件会移入 .font-spider 目录内, 与 html 文件同级的是新字体文件

font-spider ./*.html

使用

将新的 ttf 文件放到样式文件中, 并使用

@font-face {
  font-family: "myFont";
  src: url("文件保存地址路径");
  font-weight: normal;
  font-style: normal;
}

.test {
  font-family: "myFont";
}

小贤笔记

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
font-spider WebFont 压缩工具

下载 font-spidernpm install font-spider -g注: 下载失败的话可使用淘宝镜像npm config set registry http://registry.npm.taobao.org新建一个 html 文件注: 不要忘记引入下一步创建的 CSS 文件<!DOCTYPE html><html lang="en"> &lt...
复制链接

扫一扫