font-spider压缩web font字体

最新推荐文章于 2024-08-09 08:00:42 发布

IT~少年人

最新推荐文章于 2024-08-09 08:00:42 发布

阅读量384

点赞数 1

文章标签： font-spider font压缩 web font font优化

本文链接：https://blog.csdn.net/qq_43634982/article/details/109764745

版权

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

在这里插入图片描述

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>