字体压缩 前端字体压缩
创始人
2025-05-30 15:14:32
0次

最近在写官网时候开开心心的将需求开发完成验收完毕，就在上线的时候你发生了奇怪的事情。
上线后通过域名访问发现要很久页面才能展示出来，后来通过排查发现服务器带宽小的可怜，机智的我有通过Network 和 Lighthouse 发现问题出在字体上

项目用到四个字体ui提供的都是15000kb左右的大小文件为otf后缀格式，导致页面解析慢

想到字体的原因我就想到字体压缩 找了一些工具发现其他都是pyhton或者需要手动录入用到的文字进行提取的，适合前端童鞋的好像只剩下了font-spider 工具

字体提取

  1. 安装工具
    npm install font-spider -g
  2. 进入项目目录执行压缩 因为我有多个文件所以用了*.html
    font-spider *.html 或者 font-spider 要压缩的文件名字.html
  3. 压缩完成
    .font-spider文件夹中是压缩前的字体，压缩后的字体会替换到原本文件

这样工具就会自动提取html中用到的字体其他未用到的删除，达到压缩的目的。
如果到这里你成功了那么恭喜你，但如果你出现了报错,说明你的字体文件类型不是font-spider 所支持的
**
path.dirname = newName.dirname;
TypeError: Cannot read property ‘dirname’ of undefined
**

解决方法

1.将你的otf或者其他类型的字体文件 转换为ttf后缀文件
文件类型转换地址
2. css中引用ttf后缀字体文件
3. 重新运行压缩命令 font-spider *.html

词库加载错误:未能找到文件“E:\highferrum_mysql\Configuration\Dict_Stopwords.txt”。

上一篇：基于java下springboot框架实现汽车租赁系统管理展示

下一篇： 国际残疾人日主题活动方案

相关内容

热门资讯

人生感悟的随笔 人生感悟的随笔　　人生道路千条万条，但最后所走的，只有一条。每个人的生活都是不同的，但都要经历风雨。...
这年我们都还小心情随笔 这年我们都还小心情随笔　　这年，我们都还小，我已经20岁了，我以为自己是个大人了，其实自己还差的太远...
幼儿园中班教学随笔 　　时间犹如一叶小舟转瞬即逝，转眼间一学期马上就要过去了，孩子们的笑脸和纯真，老师的付出和回报，都逐...
华为MetaERP最佳的免费开... 引言Odoo MES系统是世界排名第一的开源免费Odoo企业管理系统中，车间现场管理相...
信捷PLC通过EtherCat... 信捷PLC支持ethercat通讯协议，可以和支持ethercat的从站通讯，像伺服驱动器或IO站点...
幼儿园教育随笔常规 　　在与幼儿相处的过程中，会遇到哪些情况呢?小编收集了幼儿园教育随笔常规，欢迎阅读。　　幼儿园教育随...
亲爱的我想对你说心情随笔 亲爱的我想对你说心情随笔　　亲爱的，我想此刻用一封信来告诉你我的感受，我的看法。我不知道你会不会看到...
描写秋天的落叶随笔美文 描写秋天的落叶随笔美文（通用57篇）　　在现实的学习、工作中，大家或多或少都对随笔有些了解吧？随笔是...
八月十五月儿圆随笔 八月十五月儿圆随笔　　在中国的农历里，一年分为四季，每季又分为孟、仲、季三个部分，因而中秋也称仲秋。...
【网络】网络层协议——IP 目录网络层IP协议IP基础知识IP地址IP报头格式网段划分CIDR特殊的IP地址IP地址的数量限制私...
$route.params是否... 通过与chatGpt不断的反问交流，终于获得了最终答案，回答如下...
大数据工程师需要学习哪些内容 大数据开发对于Java语言的依赖程度比较高，如果想尝试大数据开发，学习过...
浅谈知识蒸馏的现状与未来 注：本文由chatGPT生成，可能部分内容有所冗余或欠缺，...
小班教育随笔 - 小班教育随笔 -范文和孩子们相处的时间长了，也就有了感情，何况干幼教这一行最基本的就是要有爱心，要和...
心情的随笔 心情的随笔（通用84篇）　　在学习和工作的日常里，应该很少人不知道随笔吧？随笔是散文的一种，可以不受...
幼师教育随笔 幼师教育随笔范文（通用21篇）　　无论是身处学校还是步入社会，大家对随笔应该都不陌生吧？随笔可以观景...
【Android】之【Hand... 一、面试必问 1、Handler是什么 Handler是Android中的异步消息处理机制。当发送一...
【MySQL】007 -- 事...     此文章为《MySQL 实战 45 讲》的学习笔记，其课程链接可参见࿱...
美好中秋随笔 美好中秋随笔　　对中秋的描写，有很多，有忧伤的思念、有团聚的喜悦、情感的缠绵、有月圆的美丽, 又到中...
教师教育教学随笔 教师教育教学随笔（精选10篇）　　在学习和工作中，大家对随笔应该很熟悉吧？随笔通常指一种散文体裁，随...