引入第三方字体体积太大的问题 |
您所在的位置：网站首页 › 微信账单字体太大了怎么解决视频 › 引入第三方字体体积太大的问题 |
引入第三方字体体积太大的问题
|
在做营销活动的时候，设计稿这边使用了"思源"的字体。为了统一整个页面的字体风格，于是就把用到的字体引进来项目，但是最后发现字体大小竟然达到了 14MB，加载时间为3.74秒，可以预想到加载时间会进一步增长。如果用户还处于弱网环境下，这个等待时间是不能接受的。 font-spider通过分析本地的CSS与HTML文件获取字体中没有使用的字符，并把这些字符数据从字体中删除以实现压缩，同时生成跨浏览器使用的格式。 用法 全局安装 npm i font-spider -g 复制代码 新建一个项目项目里放入字体，字体一定是ttf格式，并使用css文件引入字体，并在html里引入 index.html .test { font-family: "SourceHanSerifCN-Light"; } Document 表达爱有五种语言， 你是属于哪一种呢？ click P2（引导页） 你是不是总觉爱而不得？ 在亲密关系理论里，爱有五种语言： A肯定言语 B精心时刻 C接受礼物 D服务行动 E肢体接触 如果你觉得自己做的对方总不领情，或者对方说爱你你却感觉不到，可能是你们爱的语言出现偏差，也即爱的方式不一致，你知道自己爱的语言吗？ 马上来测试 P3~P12（问题页，2道问题为1页） 单选出新最合适的选项，别纠结，遵循内心第一选择。（每个问题页都有） 复制代码index.css @font-face { font-family: "SourceHanSerifCN-Light"; src: url("./SourceHanSerifCN.ttf"); } 复制代码 终端使用命令压缩 font-spider index.html 复制代码 输出成功会发现会把10几兆的字体文件变成40多KB，因为他把多余的文字去掉了，只提取我们页面出现的那些文字。 font-slider虽然好用,但是由于其原理是直接分析本地 CSS 与 HTML 文件获取没有WebFont中没有使用过的字符,这样一来,对于动态生成的文字,就没有办法使用font-slider了.这是个坏消息!尤其在当下,很多框架都是数据驱动的,更是很多文字都不会直接出现html文件中.对于这种情况, 其他工具fontmin或许能解决. 最后通过font-spider把页面上出现的文字处理了一次，体积和加载时间都缩短了很多。 |
【本文地址】