600字范文,内容丰富有趣,生活中的好帮手!
600字范文 > 【font-spider】网页中引用字体文件过大的解决办法 网页字体文件压缩

【font-spider】网页中引用字体文件过大的解决办法 网页字体文件压缩

时间:2023-04-13 14:29:39

相关推荐

【font-spider】网页中引用字体文件过大的解决办法 网页字体文件压缩

font-spider(字蛛)官网:

字蛛

github源码

安装

先要安装npm与node

安装好之后就可以直接安装字蛛

我用了centos的服务器 用npm全局安装font-spider

# npm install font-spider -g

安装之后输入

# font-spider

看到下面的就说明安装成功了

使用方式

首先要有项目中的html文件 在其外联的css样式中要规定字体文件

创建的css文件 我这里命名为css.css

在 CSS 中使用 WebFont:@font-face{font-family:'汉仪乐喵体简';src:url(../HYLEMIAOTIJ.TTF);}body{font-family:"汉仪乐喵体简";}

文件并不是全部都需要只要其中有一个就行。在生成新的字体文件的时候所有对应的格式都会生成

在html中外联这个css文件

font.html:

<!doctype html><html lang="en"><head><meta charset="UTF-8"><title>main</title><link rel="stylesheet" href="css/css.css"></head><body><div>这是测试的字1234567890!@#$%^</div></body></html>

在使用fonts-spider之前先cd到目标文件目录 就是你需要生成的新的字体文件的html目录

或者写全目录

使用font-spider生成:

# font-spider *.html

*是通配符 代表所有的html文件

输入之后回车开始生成:

我这里由于测试的html中字少 所以字体文件只有8kb左右 实际情况下如果html中字的种类越多 生成的字体文件越大 但是绝对比原来的字体文件小很多

生成完毕的字体文件会代替原来的字体文件,而原来完整的字体文件会进入到当前目录下的一个叫.font-spider的隐藏文件中

开心。-。 以后再也不怕设计稿用个大段的特殊字体了。当然最好的解决办法就是尽量别在网页上用特殊字体!

欢迎评论点赞哦

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。