使用font-spide压缩字体文件

注:我压缩.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>


4、在文件根目录下,打开cmd,然后输入如下命令

font-spider ./index.html
压缩如图:

请添加图片描述


此时打开你font文件夹,里边会有一个.font-spider文件夹,也证明压缩成功了,会看到已经压缩好的文件字体

猜你喜欢

转载自blog.csdn.net/sxs7970/article/details/119751965
今日推荐