当前位置: 代码迷 >> 综合 >> font-spider 让网页引入中文字体成为可能
  详细解决方案

font-spider 让网页引入中文字体成为可能

热度:85   发布时间:2023-12-23 20:54:51.0

随着互联网的飞速发展,人们已经不满足于在web页面上使用一些默认字体了,但是页面引入字体文件体积很大加载又费时,那是怎么办呢?今天介绍的这个工具就可以完美的解决这个问题

介绍

字蛛是一个智能 WebFont 压缩工具,它能自动分析出页面使用的 WebFont 并进行按需压缩。

具体意思就是说你可以在页面直接引入字体,它能自动检测 css 里 @font-face 自定义的字体,并且从字体里提取出页面中有用到的字体,极大的减少了字体文件的空间。

小鑫の随笔

前置知识

  • 会css、html、nodeJs、npm的基础操作

食用说明

安装

安装好 nodeJs 后,安装 font-spider,执行命令:

npm install font-spider -g

命令执行完后可以执行

font-spider -V

查看是否安装成功,安装成功的话会输出版本号

小鑫の随笔

使用

css 里定义 @font-face 引入字体文件,并在需要使用字体的地方定义 font-family

@font-face {
    font-family: '字体名字';src: url('字体路径');
}p {
    font-family: '字体名字';
}

现在是整个过程中最重要的一步了 - 把使用到的字体从字体文件中提取出来,在 html 文件所在的位置打开命令行,执行古娜拉黑暗神命令:

font-spider *.html* 号代表匹配当前文件夹下的所有 .html 后缀的文件

命令执行成功之后,压缩过后的字体文件会覆盖原来的字体文件,并且会生成一个 .font-spider 文件夹,这个文件夹存放的是压缩之前的字体文件。

小鑫の随笔

字蛛只是对原来的字体文件进行了一些 提取 的操作,不会影响字体本身的样式,可以放心使用

  • 字蛛官网:http://font-spider.org/
  • 字蛛github:https://github.com/aui/font-spider

(更多复杂的操作可以参考 git 的文档,这里只是对字蛛提供一个简单的使用 demo,mama再也不用担心我的页面没有酷炫的汉字了~)

阅读原文:小鑫の随笔

  相关解决方案