从客户得到的网页字体足足有 10MB 大小,会严重拖慢网页加载,如何处理?
阅读下面的解决方法前,建议先阅读网页字体优化,了解一些基本知识以及这么做的原因。
字体去繁体
GBK 结尾的字体偏大的原因是包含庞大的繁体字库,大多数网页并不需要,可以使用 fontTools 得到字体的简体中文子集。
网页中文字体压缩(woff2)、拆分、去繁体字库,提高加载速度
从客户得到的网页字体足足有 10MB 大小,会严重拖慢网页加载,如何处理?
阅读下面的解决方法前,建议先阅读网页字体优化,了解一些基本知识以及这么做的原因。
GBK 结尾的字体偏大的原因是包含庞大的繁体字库,大多数网页并不需要,可以使用 fontTools 得到字体的简体中文子集。
如果要为网站增加矢量图标,其中两个选项是使用 SVG 和使用字体图标,两种方式各有千秋,以下是我个人做的比较。
在阅读这一部分前,可以先参考文章 HTML中嵌入SVG图片的N种方式,了解一下不同的 SVG 嵌入页面的方式。
缺点 | 解决方案 |
---|---|
如果将 SVG 放在静态资源目录,通过路径引用至页面,SVG 将造成额外的 HTTP 请求 | 在 HTML 中内嵌 <svg> 标签 |
如果在 HTML 中内嵌 <svg> 标签,HTML 会显得杂乱且无法复用 | 使用 SVG Inline Loader for Webpack 可以用 require 的方式向 HTML 插入 SVG |
图标本身带的颜色(类似 fill="#ccc" )无法覆盖 | 移除 SVG 本身的颜色。使用 SVG Inline Loader for Webpack 的 removingTagAttrs 选项,可以在打包时批量去除图标本身的颜色,再通过 CSS fill 覆盖颜色 |