vue 字体文件压缩

最新推荐文章于 2023-07-19 17:43:03 发布

杨忠虚

最新推荐文章于 2023-07-19 17:43:03 发布

阅读量1.2k

点赞数 1

分类专栏：字体管理文章标签： javascript node.js vue.js

原文链接：https://blog.csdn.net/qq_43364234/article/details/100518021

版权

字体管理专栏收录该内容

1 篇文章 0 订阅

订阅专栏

字蛛是一个中文字体压缩器，通过分析本地 CSS 与 HTML 文件获取 WebFont 中没有使用的字符，并将这些字符数据从字体中删除以实现压缩，同时生成跨浏览器使用的格式。
安装方法
npm install font-spider -g
1
使用方法
首先在项目录当中创建一个font.html文件，并且在static文件夹下创建一个font.css文件
font.css文件的代码如下图所示：

@font-face {
font-family: ‘myFont’;
src: url(’./regular.ttf’);
}
#h {
font-family: ‘myFont’;
}
font.html文件的代码如下图所示：


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="stylesheet" href="./static/font.css" />
  </head>
  <body>
    <h1 id="h">这里的文字就是需要用到的文字</h1>
  </body>
</html>

font.html里的h1标签id对应着font.css里的文字样式

接着在项目目录下执行命令行：

font-spider ./font.html
执行完成之后会自动生成一个压缩之后的字体文件，通过下图可以看到压缩的效果还是非常明显的。

完成之后在需要使用字体的vue页面引入使用即可
版权声明：本文为CSDN博主「我就是一小白」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_43364234/article/details/100518021

杨忠虚

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
vue 字体文件压缩

字蛛是一个中文字体压缩器，通过分析本地 CSS 与 HTML 文件获取 WebFont 中没有使用的字符，并将这些字符数据从字体中删除以实现压缩，同时生成跨浏览器使用的格式。安装方法https://blog.csdn.net/qq_43364234/article/details/100518021npm install font-spider -g1使用方法首先在项目录当中创建一个font.html文件，并且在static文件夹下创建一个font.css文件font.css文件的代码如下图所
复制链接

扫一扫

专栏目录