使用font-spide压缩字体文件

最新推荐文章于 2024-09-21 21:55:40 发布

sxs7970

最新推荐文章于 2024-09-21 21:55:40 发布

阅读量503

点赞数

分类专栏： js 前端文章标签：压缩字体文件使用字珠压缩字体文件 vue压缩字体文件

本文链接：https://blog.csdn.net/sxs7970/article/details/119751965

版权

字体压缩 font-spider @font-face CSS引用个性化字体

关键词由CSDN通过智能技术生成

前端同时被 2 个专栏收录

132 篇文章 2 订阅

订阅专栏

3 篇文章 0 订阅

订阅专栏

注：我压缩`.otf`格式的没有成功，`.ttf`的可以，（没有研究过，有的可以指出来）

重点：它的原理是，它会把你使用过的字体压缩出来，没有用过的依然不会压缩，所以就算把压缩好的放到项目中，使用时仍然不生效，这里就比如我压缩的是999 ，那么只针对 999 的文字生效，（这种方案只针对个别需要处理的字体适合）

全局安装 npm install font-spider -g
font-spider -V 查看有没有安装上

在桌面上新建一个文件夹(我在桌面上新建的)，（不在桌面也行，想在哪在哪）
我的目录格式：

1、在css下创建index.css文件,代码如下

@font-face {
    font-family: "SSB";
    src: url("../font/SourceHanSansCN-Bold.ttf");
    font-weight: normal; 
    font-style: normal; 
}

2、把你的字体文件放到font文件夹下

3、在index.html中引入index.css文件，其代码如下

<!DOCTYPE html>
<html lang="">
  <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">
    <!-- 引入-->
    <link rel="stylesheet" href="css/index.css">
    <title>444</title>
  </head>
  <body>
    <noscript>
    </noscript>
     <!-- 使用-->
    <div id="app" style="font-family:SSB">9999</div>
  </body>
</html>