前端使用字蛛压缩字体文件

最新推荐文章于 2024-08-20 08:47:13 发布
最新推荐文章于 2024-08-20 08:47:13 发布
阅读量430 收藏
点赞数
文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xiao__nizi/article/details/117552527
版权
本文介绍了如何使用字蛛(font-spider)工具来压缩和优化网页字体文件，通过在CSS中引入字体文件，将常用字符放入HTML，然后运行字蛛进行压缩，最终减少字体文件大小，提高前端页面的字体加载速度。步骤包括安装字蛛、配置CSS、准备HTML内容、运行字蛛压缩以及上传新字体文件到服务器。
摘要由CSDN通过智能技术生成

注意：

1、安装字蛛的前提需要先安装好nodejs

2、字体文件必须是.ttf为后缀的

3、增加新的文字需要重新压缩一次

1、安装字蛛

npm install font-spider -g

我这里已经安装过了，又覆盖了一遍

2、CSS文件里引入的字体文件

3、将网站常用的汉字（包括数字，字母，符号）粘贴到html文件中，并引入CSS文件。

4、使用字蛛压缩字体文件，字体文件夹下会生成一个".font-spider"的文件夹，里边装的是生成前端字体文件，而新的字体文件大小可以明显看到变小了

font-spider ..\font.html

5、将新的字体文件上传到服务器，每个前端页面的CSS引入这个字体文件即可实现全网站的字体加载效率明显高了。

binggo,到此结束，有什么问题欢迎留言！！！

xiao__xf
关注
html 压缩字体文件（字蛛）
PrimaryColor
02-14 752
场景： 很多时候，我们在制作网站的官网，用到了UI设计给我们的字体，但发现用到这个字体的地方非常少，而文件却占用很大，比如2M以上。如果我们明确的知道了使用这个字体的文字不是很多，那么我们就可以通过字蛛这个工具来对字体文件进行压缩。 字蛛工作原理： 获取整个dom上所有的文字，将出现过的文字并对应着字体文件进行压缩，用到的就参与压缩，没有用到的就删除了。如果是js操作dom添加的文字，字蛛是获取不到的，也就无法进行压缩，所以vue项目的压缩需要单独写个原生demo来进行压缩，为了方便操作。
字蛛（FontSpider，中文字体压缩器）网页自由引入中文字体
不如养猪！
08-03 773
如果设计师面试一位 Web 前端工程师，其中有一段这样的对话： “如果设计师希望用图片实现某个字体样式，而从技术的角度来说这样不合理，但设计师非常坚持，这时候你怎么办？” “我会给设计师讲解工程上面临的问题，争取他理解。例如：如果文本使用图片，以新浪站点的访问量来说，这里会需要消耗大量的服务器资源，至少需要增加多台服务器，增加带宽流量消耗”。 这些年 Web 前端技术在迅猛的发展
字蛛的使用教程
05-18
字蛛的使用教程
使用字蛛实现字体压缩
weixin_45631494的博客
02-09 2093
在使用字蛛压缩字体之前，需要安装Node.js。下载地址如下[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AEDQKd6X-1675930919829)(images/node%E4%B8%8B%E8%BD%BD.png)]下载完后，一路下一步安装安装完后，win+R输入node -v，要是出现了版本号，则说明node安装成功。
字蛛+（Font-spider-Plus）：智能 WebFont 压缩工具
最新发布
gitblog_00373的博客
08-20 323
字蛛+（Font-spider-Plus）：智能 WebFont 压缩工具 font-spider-plusfont-spider-plus（字蛛+）是一个智能 WebFont 压缩工具，它能自动分析出本地页面和线上页面使用的 WebFont 并进行按需压缩。项目地址:https://gitcode.com/gh_mirrors/fo/font-spider-plus 在网页开发中，WebFon...
字蛛使用
amihui的博客
11-03 8545
先贴字蛛官网：http://font-spider.org/1、想要用到字蛛首先要安装node 或者有 git 也可以；2、安装好之后就开始字蛛的安装，git复制这句：npm install font-spider -g3、接着一大堆乱七八糟的不用看懂；打开你做好的html文件夹，字体记得建一个font文件夹放进去，和images、CSS文件夹并排，字体名称一定要换成字母的，你可以是中文缩写什么的。
字体压缩 前端字体压缩
weixin_49230250的博客
03-19 3097
最近在写官网时候开开心心的将需求开发完成验收完毕，就在上线的时候你发生了奇怪的事情。上线后通过域名访问发现要很久页面才能展示出来，后来通过排查发现服务器带宽小的可怜，机智的我有通过Network 和 Lighthouse 发现问题出在字体上项目用到四个字体ui提供的都是15000kb左右的大小文件为otf后缀格式，导致页面解析慢想到字体的原因我就想到字体压缩 找了一些工具发现其他都是pyhton或者需要手动录入用到的文字进行提取的，适合前端童鞋的好像只剩下了工具。
前端使用font-spider压缩字体文件
xiongxiaoning的博客
10-09 249
有时需引入外部字体，字体文件过大，页面加载很慢，故使用此方法压缩。 安装 npm install font-spider -g 使用 新建【font】目录，html文件，将项目里需要压缩的文字写入html； 将字体文件放入目录； css中引入字体文件； 使用font-spider压缩：font-spider index.html； 如下所示： 压缩成功： 后字体文件只有几k，将这个压缩后的字体文件引入项目即可。 缺点：只能让指定文字使用该字体。 ...
字蛛-字体压缩模板-vite+vue3+ts
08-05
- **字蛛**：可能是指用于处理字体文件的工具或库，它可能负责压缩、合并字体资源，以减少网络传输的大小，提高页面加载速度。 在【压缩包子文件的文件名称列表】中，"vite-project"可能是一个包含Vite配置和项目...
html优化字体包,『前端开发』- 字体文件大小优化实践
weixin_39955233的博客
06-09 411
这次项目中UI小姐姐要求用平方等其他字体，遂引入了这些字体，打包的时候发现，OMG，一个字体文件竟然要10M，实在不能忍，于是开始了字体文件大小的优化实践，最后变成38KB一个，还行吧。解决思路font-spider 字蛛 原理是通过爬取 HTML 文件以及关联的CSS，找到设置了字体的样式，再爬取相关的的字符，排序去重，最后只针对这些字符保留字体文件相应的字符，从而达到大大缩小文件体积大小的目的...
html字体文件过大导致加载缓慢如何解决？
robinhunan的博客
03-17 4369
在网页设计中，美工通常要求前端使用自己的定义的字体，比如苹果的字体PingFangMedium.ttf， 而实际上除了英文和数字好看外，中文并不好看，特别是windows下，中文发虚。但是字体文件却特别大，因此考虑通过压缩字体， 将汉字这些字符数据从字体中删除以实现压缩，同时生成跨浏览器使用的格式，从而在不影响网页效果的前提下，加快网页响应速度。 压缩前字体文件PingFangMedium.ttf高达10.5M 字体压缩的原理就是你要使用的字符单独拿出来，不用的就不包含，其中font-sp.
font-spider-plus:font-spider-plus（字蛛+）是一个智能 WebFont 压缩工具，它能自动分析出本地页面和线上页面使用的 WebFont 并进行按需压缩
04-27
字蛛+（Font-spider-Plus） font-spider-plus（字蛛+）是一个智能 WebFont 压缩工具，它能自动分析出本地页面和线上页面使用的 WebFont 并进行按需压缩。 特性 除了兼容font-spider（）支持的特性： 压缩字体：智能删除没有被使用的字形数据，大幅度减少字体体积 生成字体：支持 woff2、woff、eot、svg 字体格式生成 font-spider-plus（字蛛+）还具有以下特性： 支持线上动态渲染的页面 支持线上GBK编码的文件 安装 npm i font-spider-plus -g 使用范例 一、书写 CSS 出自： /*声明 WebFont*/ @font-face { font-family: 'source'; src: url('../font/source.eot'); src: url('.
前端字体压缩（免费简单易上手）
山有木兮木有枝 心悦君兮君不知
12-02 2987
前端字体压缩（免费简单易上手）
前端 / 小程序——第三方字体库压缩（压缩率80%）
qq_34082921的博客
11-16 1759
在做微信小程序时，需要使用第三方字体库，但是该字体库有30+MB大小，导致微信使用一直报错。网速很慢的话，极其影响用户体验，小的字体库没有问题，所以是字体库太大导致报错，并且加载也很慢，致使字体无法生效。换字体是不可能的，特此记录一下如何将38MB的字体库压缩成5.28MB的，这种压缩比率，一般的在线压缩或软件是达不到的。经历一次压缩和转换最终从37MB压缩为5.28MB，已经达到我的需求了经过亲自测试，压缩后依旧可用并且字体样式没受影响，从37M压缩到5.28M，压缩比例达到80%
使用字蛛进行字体文件的压缩。(压缩.ttf文件）
qq_44817810的博客
02-22 945
1.使用`npm install font-spider -g`命令下载安装font-spider。在需要压缩的字体文件目录下，新建一个.html文件。在div中填写需要使用的字体内容。按照字体内容生成压缩文件。将.html文件和.ttf文件放在同一级目录下。在.ttf文件夹的目录下，打开命令行。gitee中包含使用的方法。2.检查是否安装成功。
【性能优化篇】.ttf字体包过大引起的网页加载过慢 font-spider 压缩字体包 适用于任何前端项目
c327127960的博客
07-27 7767
【性能优化篇】.ttf字体包过大引起的网页加载过慢 font-spider 压缩字体包 适用于任何前端项目
前端性能优化——启用文本压缩
Gefangenes的博客
06-13 671
对于压缩哪些类型的文件，建议总是压缩文本文件类型（因为它们的压缩效果很好），以及避免压缩内部已经压缩的文件。综上所述，gzip 是最常用的压缩算法之一，具有较高的压缩效率和广泛的支持程度，因此可以考虑使用。当启用 gzip_static 指令后，Nginx 会检查请求的文件是否存在与同名的 .gz 文件，如果存在，则直接返回 .gz 文件，否则才会进行压缩并返回压缩后的内容。brotli 是一种新型的压缩算法，它具有更高的压缩效率和更快的压缩速度，可以进一步减少传输数据的大小，从而提高页面加载速度。
Node.js字蛛压缩字体Webfont的操作步骤
漏刻有时数据可视化大屏（PHP&ECHARTS智能化开源软件系统）
10-18 566
font-spider c:\Users\Administrator\Desktop\demo\index.html C:\Users\Administrator\AppData\Roaming\npm\node_modules\font-spider\node_modules font-spider --debug c:\Users\Administrator\Desktop\font\inde...
字体文件压缩工具font-spider-plus
Mahuicool的博客
12-27 1696
font-face是css3中允许使用自定义字体的模块，他主要是吧自己定义的web字体嵌入到网页中。
前端图标字体的提取和使用
06-13
前端图标字体是一种非常方便的图标使用方式，它们可以通过 CSS 的方式进行引用和使用。通常情况下，前端图标字体都会以字体文件的形式提供，常见的前端图标字体库有 FontAwesome、Iconfont 等。 要使用前端图标字体，首先需要将字体文件引入到 HTML 页面中。通常情况下，可以通过在 HTML 头部添加以下代码来引入前端图标字体： ``` <link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css"> ``` 其中，`path/to/font-awesome` 应该替换为字体文件所在的路径。 引入字体文件之后，就可以在 HTML 页面中使用前端图标字体了。通常情况下，可以通过在 HTML 中添加以下代码来使用前端图标字体： ``` <i class="fa fa-star"></i> ``` 其中，`fa` 是字体库的名称，`fa-star` 是具体的图标名称。不同的前端图标字体库可能会有不同的类名和图标名称，需要根据具体的字体库来使用。 除了通过类名来使用前端图标字体外，还可以通过 CSS 伪元素来使用。例如，可以通过以下代码来在链接的前面添加一个图标： ``` a:before { font-family: 'FontAwesome'; content: '\f005'; } ``` 其中，`FontAwesome` 是字体库的名称，`\f005` 是具体的图标对应的 Unicode 编码。不同的前端图标字体库可能会有不同的 Unicode 编码，需要根据具体的字体库来使用。 总的来说，前端图标字体是一种非常方便的图标使用方式，可以大大简化前端开发中的图标使用，提高开发效率。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值