font-spider问题【已解决】

时间：2023-03-08 20:11:08
font-spider问题【已解决】

最近写一个项目，使用了引入的字体，然而字体太大，于是找解决方法，想要把字体压缩一下，然后找到了font-spider;font-spider使用方法这里就不多说了，网上一大把，主要是在node里面安装一个fontspider就可以了，然后通过命令行进行压缩，初期压缩是成功了的，但是查看压缩过的字体发现并不是原来的字体，并且网页上也没有生效，然后就由于忙着赶任务就搁置了，今天想着要把它解决掉，于是又试了一下，发现还是不行，就想是不是因为字体名字写错了的原因，然后把字体名字修改成css里面引入的字体名称后，再次压缩果然成功了。可以看图片如下：

font-spider问题【已解决】

（执行命令后未成功的）

font-spider问题【已解决】

（执行命令后成功的）

成功和未成功的区别就是 CSS selectors等上面有显示内容。

具体内容放在下面的代码里面：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <link rel="stylesheet" type="text/css" href="css/css.css"/>

        <title></title>

        <style type="text/css">

            h1{

                font-family: "ZanKuXiaoWei";

            }

        </style>

    </head>

    <body>

        <h1>HELLO</h1>

    </body>

</html>
 @font-face {

    font-family: 'ZanKuXiaoWei';

    src: url('../fonts/zankuxiaowei.eot');

    src: url('../fonts/zankuxiaowei.eot?#iefix') format('embedded-opentype'),

     url('../fonts/zankuxiaowei.woff') format('woff'),

     url('../fonts/zankuxiaowei.ttf') format('truetype'),

     url('../fonts/zankuxiaowei.svg#ZanKuXiaoWei') format('svg');

    font-weight: normal;

    font-style: normal;

  }

font-spider问题【已解决】

希望对大家有帮助！

相关文章