欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

font-spider压缩web font字体

程序员文章站 2024-02-16 23:13:58
...

1、下载font-spider

基于node环境，必须先安装node。若未安装，自行去node官网下载安装。
npm i font-spider -g

2、项目目录

project
font-gzip.html
font
PingFangSC-Regular.ttf
PingFangSC-Semibold.ttf
PingFangSC-Medium.ttf
DINPro-Medium.ttf
HelveticaNeue.ttf

font-spider压缩web font字体

html代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>font字体压缩</title>
    <style>
      @font-face {
        font-family: PingFangSC-Regular;
        src: url("./font/PingFangSC-Regular.ttf");
      }
      @font-face {
        font-family: PingFangSC-Semibold;
        src: url("./font/PingFangSC-Semibold.ttf");
      }
      @font-face {
        font-family: PingFangSC-Medium;
        src: url("./font/PingFangSC-Medium.ttf");
      }
      @font-face {
        font-family: DINPro-Medium;
        src: url("./font/DINPro-Medium.ttf");
      }
      @font-face {
        font-family: HelveticaNeue;
        src: url("./font/HelveticaNeue.ttf?#font-spider");
      }
      .p1 {
        font-family: PingFangSC-Regular;
      }
      .p2 {
        font-family: PingFangSC-Semibold;
      }
      .p3 {
        font-family: PingFangSC-Medium;
      }
      .p4 {
        font-family: DINPro-Medium;
      }
      .p5 {
        font-family: HelveticaNeue;
      }
      
    </style>
  </head>
  <body>
    <p class="p1">hello，world！你好呀</p>
    <p class="p2">hello，world！你好呀</p>
    <p class="p3">hello，world！你好呀</p>
    <p class="p4">hello，world！你好呀</p>
    <p class="p5">hello，world！你好呀</p>
  </body>
</html>

3、压缩web font字体

在font-gzip.html目录下打开cmd窗口。
运行font-spider ./font-gzip.html

font-spider压缩web font字体
打开文件夹目录发现！！！
font-spider压缩web font字体

前后html加载font文件对比

压缩前：
font-spider压缩web font字体
压缩后：
font-spider压缩web font字体

相关标签： font-spider font压缩 web font font优化

上一篇： C#图片按比例缩放的实现代码

下一篇： c#制作类似qq安装程序一样的单文件程序安装包

推荐阅读