网页特殊字体过大的优化

html网页引用中文字体,文件过大,加载缓慢的解决办法

解决办法:

一、字蛛

原理

  1. 爬行本地 html 文档,分析所有 css 语句
  2. 记录@font-face语句声明的字体,并且记录使用该字体的 css 选择器
  3. 通过 css 选择器的规则查找当前 html 文档的节点,记录节点上的文本
  4. 找到字体文件并删除没被使用的字符
  5. 编码成跨平台使用的字体格式

==font-spider 仅适用于固定文本,如果文字内容为动态可变的,新增的文字将无法显示为特殊字体。==

使用步骤:

1.安装node.js;

2.安装字蛛:

npm install font-spider -g 

3.运行字蛛

font-spider C:\Users\wangchao\Desktop\index*.html 
<!--也就是你的html完整路径 【*】 是通配符,表示会扫描所有的html文件 -->
<!--要是打包单个html中使用的特殊字体文字,将文件名改成对应的文件名-->

4.运行完后

<!--发现字体文件的根目录多了一个font文件夹,文件夹里存放的是原来字
体文件的备份,而网页引用的是使用字蛛后压缩保存的字体-->

二、在线提取字体

字体生成器

    <!--css-->
    .font {
        font-size: 32px;
        color: skyblue;
        font-family: 'sx';
    }
    
    @font-face {
        font-family: 'sx';
        src: url('suxin-subfont.ttf') format('truetype');
        font-weight: normal;
        font-style: normal;
    }
    
    <!--html-->
     <p class="font">京德匠心铸器</p>

也可以看出来字体文件生效了,但是同样,也不支持动态的添加的文字

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏理论坞

鸟笼逻辑

6730
来自专栏java一日一条

IT 已成为最疯狂的加班行业,没有之一

夜幕降临,当IT大楼里依然灯火通明时,那一刻,我仿佛王进喜、石传翔等劳模灵魂附体,我知道我不是一个在加班,我不是一个人!连续9个通宵加班都不是事,一点不夸张,这...

12420
来自专栏葡萄城控件技术团队

生产制造MES系统中,如何应用报表分析?

中国制造业产业结构逐步从低附加值传统加工制造业和资源密集型制造业向高附加值新型制造业转型升级。生产制造类企业为了监控项目进度和产品生产情况,会需要制作大量的报表...

34530
来自专栏java一日一条

为什么跳槽加薪会比内部调薪要高?

之后的若干年加薪都是遵循企业内部晋升通道,如果企业加薪幅度赶不上同岗位市场薪酬回报的上涨幅度,就会出现题主所说的现象。

8210
来自专栏理论坞

破窗效应

8520
来自专栏java一日一条

程序员的走与留?

初级开发人员在他们的职业生涯早期必须考虑的一个大问题就是,他是该离开还是留下。我在我职业生涯的早期发现,相对于我的同事我所得的报酬过低,而这仅仅是因为他们工作的...

7220
来自专栏养码场

面试想拿 25K,HR 却说只值 15K,技术人该如何反驳?

知乎上看到这样一个问题:面试的时候想拿xx,HR却说我只值xx,这种情况下应该怎么办?

21420
来自专栏Grace development

“生于忧患,死于安乐”之程序员人生

没错,大多人的经历都是如此!这样艰苦的奋斗,不断的努力,使我们在这个行业立足。正是这份兴趣、这份毅力、这份坚持支撑着我们,才让我们走到了现在。

7410
来自专栏java一日一条

程序员的走与留?

初级开发人员在他们的职业生涯早期必须考虑的一个大问题就是,他是该离开还是留下。我在我职业生涯的早期发现,相对于我的同事我所得的报酬过低,而这仅仅是因为他们工作的...

7020
来自专栏java一日一条

为什么你应该学习编程

很多人,从HR专业人员到市场营销专业人员,都在硅谷工作,但硅谷对编程专业人士的需求更多,也更重视这个行业。大多数人往往更偏爱一个收入更高的工作。

8930

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励