如何让网页字体文件大瘦身?前端字体优化知多D
日常开发网页经常会使用一些特殊字体,比如思源黑体、苹方字体等,因为这些字体在一般的宿主环境中是不存在的,需要通过 css 的 @font-face
定义,并从服务器中加载对应的字体文件,而字体文件一般都是比较大的,甚至有时候一个字体比其他所有的资源(js、css、图片)加起来还要大,对网页的加载性能起到非常关键的影响,因此有必要对字体进行一些优化。本文主要从字体格式、按需提取、统一渲染三个方面来谈谈优化字体的常用技巧。
转换字体格式
现在是 1202 年了,各主流设备基本都支持 woff2 字体格式,因此网站中没有必要再引入多种不同格式的字体了。一般地,建议只引入 woff2 就好了,既可以保持代码的简洁性,又可以减少上传到你服务器的文件,何乐而不为?
可是很多时候美术同学只提供其他格式的字体文件给我们,比如 TTF 或 OTF,那如何将其转换成 woff2 呢?
TTF 字体转 WOFF2
TTF 字体,是苹果和 windows 都支持的一种字体,因此是美术同学最喜欢用的。TTF 转换 WOFF2 是比较简单的,可以选择线上转换,推荐的网站有以下两个
ttf-to-woff2[1]
webfont-generator[2]
但是个人觉得线上转换等待上传的时间比较久,而且有时候生成的文件是空白的,因此更加倾向于使用 node 库 ttf2woff2[3] 转换。该库的周下载量达到 10w+ 的,可见好多人都会有将 tff 转换成 woff2 的需求。使用方法也很简单:
cat font.ttf | ttf2woff2 > font.woff2
复制代码
因为使用 了 cat 命令来提取 ttf 的内容,如果你使用的是 windows ,需要使用 git bash 或 wsl 来运行。
OTF 转 WOFF2
除了 TTF ,美术同学还经常提供 OTF 给我们,这是微软和 Adobe 共同研发的字体,因此在 windows 平台还是比较流行的。那如何将其转换成 WOFF2 呢?目前我还没有发现哪个线上网站或 node 库能一步到位转换的,在 google 上搜索好几个线上转换的网站,要么转换完成后无法下载 ,要么转换下载后是个空文件,反正就是不靠谱的东西。
经过一番折腾后,找到了一个不错的 python 库 otf2ttf[4],能够稳定的将 otf 转 ttf。使用方法也比较简单,首先安装 python,然后通过 pip 安装 otf2ttf 就可以使用了(pip 类似于 npm,是 python 的包管理器),不过官方的文档中示例代码应该是有一点小笔误:
otf2ttf MyFont.ttf
复制代码
里面的 MyFont.ttf 应该是 MyFont.otf 才对,因为这个 input 应该是 OTF 类型而不是 TTF 。
使用 python otf2ttf 生成 ttf 文件 后,就可以使用上面提到的将 ttf 转换成 woff2 的方法获取到 woff2 了。
关于字体转换的这里再啰嗦一下:有时候美术同学还会提供 ttc 文件给我们,这不是单个字体,而是将多种字体打包在一起了,需要从中提取出 ttf 后才能使用,可以尝试使用 TTC2TTF[5]。
按需压缩字体
一般的,尽管将字体转换成 woff2 格式,最小依然也有好几百 K ,而更多情况下会有 1-4M 左右。有时候,我们只有少数的文字需要用到特殊字体,比如说只有 0-9
这 10 个数字用到某种特殊字体,如果把整个字体文件引入就没有必要了,比切10个图片还要大。好在有一些技术能够将 0-9
这10个数字对应的字体子集提取出来。我平时会使用 font-spider 字蜘[6] 来提取。
首先,全局安装 font-spider:
npm install font-spider -g
复制代码
然后,新建一个 html 文件,比如文件名为 index.html
,里面用一个元素包含所有的你想要提取的文字,比如 0-9,并为这个元素定义上你想要的特殊字体:
<h1>0123456789</h1><style> @font-face {font-family: 'sourceHan';src: url('./SourceHanSansCN-Regular.ttf');font-weight: normal;font-style: normal;
}h1 {font-family: 'sourceHan';
} </style>
复制代码
最后,在这个 html 文件所在的目录执行以下命令:
font-spider index.html
复制代码
这时候,原来的 SourceHanSansCN-Regular.ttf
就会被移动到 .font-spider/
目录下,而原来位置的字体会被替换成只提取了 0-9
的字体文件。这个体积相差了好几个数量级的:
完整的字体文件大小是 10M :
只提取 0-9
10 个数字的字体文件只有 7K:
所以,如果你的网站内容是静态不变的,则建议使用 font-spider 将你所要用到的文字提取出来,这将会大大的减少字体文件的体积。
统一渲染时机
将字体转换成 WOFF2 及静态内容网站使用 font-spider 进行按需压缩,可以很好的控制字体的大小。(PS:WOFF2 字体没有必要再开启 GZIP,因为这个字体文本本身就是压缩过的)。
最后,我们再来看看网络速度对字体内容的影响,假如你的网页全部内容都使用某种字体,CSS 定义如下:
@font-face {font-family: myfont;src: url('./myfont.woff2') format('woff2');
}body {font-family: myfont;
}
复制代码
假如这个 myfont.woff2 文件大小为 4M,而网络下载速度只有 1M/s ,则加载这个字体需要 4 秒钟。这4秒期间由于还没有加载完成远程字体,浏览器会使用什么字体渲染呢?事实上,不同的浏览器表现会不一样的,以下是一些常见的桌面浏览器的表现:
IE:它会直接使用备用字体渲染,最后等webfont字体加载完毕后重新渲染。
Safari:它会一直等待webfont字体加载完毕,并且期间不会渲染字体。
Chrome / Firefox:它们会等待webfont字体加载,如果在3秒之内没有加载完毕,则使用备用字体渲染。最后webfont加载完毕,使用并重新渲染。
我们需要想办法统一这些行为,比较理想的行为是:先使用系统默认字体,等到远程字体加载完成了再替换成特殊字体。借助于 WebFontLoader[7] 可以很容易的实现这一效果。下面来看一下如何使用:
在 css 中通过 @font-face 定义一个字体:
@font-face {font-family: 'myfont';src: url('./myfont.woff2') format('woff2');
}
复制代码
注意,CSS 中只需要定义字体就行,而不要使用使用这个字休。
然后 引入 webfontloader (也可以通过 npm 安装),将你在 css 中定义的字体名称添加到
custom.families
列表中,并在 active 回调中将该字体添加到对应的元素上,代码如下:
<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js"></script>
<script> WebFont.load({custom: {families: ['myfont'],},classes: false,active() {document.body.style.fontFamily = 'myfont';},
}); </script>
复制代码
这样浏览器一开始就会使用默认字体渲染内容,等字体加载完成后再使用特殊字体重新渲染。
小结
关于字体优化技巧就先写到这里啦,有问题的欢迎留言交流哈。
参考资料
[1]
https://everythingfonts.com/ttf-to-woff2: https://link.juejin.cn/?target=https%3A%2F%2Feverythingfonts.com%2Fttf-to-woff2
[2]
https://www.fontsquirrel.com/tools/webfont-generator: https://link.juejin.cn/?target=https%3A%2F%2Fwww.fontsquirrel.com%2Ftools%2Fwebfont-generator
[3]
https://www.npmjs.com/package/ttf2woff2: https://link.juejin.cn/?target=https%3A%2F%2Fwww.npmjs.com%2Fpackage%2Fttf2woff2
[4]
https://github.com/awesometoolbox/otf2ttf: https://link.juejin.cn/?target=https%3A%2F%2Fgithub.com%2Fawesometoolbox%2Fotf2ttf
[5]
https://www.npmjs.com/package/ttc2ttf: https://link.juejin.cn/?target=https%3A%2F%2Fwww.npmjs.com%2Fpackage%2Fttc2ttf
[6]
https://github.com/aui/font-spider: https://link.juejin.cn/?target=https%3A%2F%2Fgithub.com%2Faui%2Ffont-spider
[7]
https://github.com/typekit/webfontloader: https://link.juejin.cn/?target=https%3A%2F%2Fgithub.com%2Ftypekit%2Fwebfontloader
最后
如果你觉得这篇内容对你挺有启发,我想邀请你帮我三个小忙:
点个「在看」,让更多的人也能看到这篇内容(喜欢不点在看,都是耍流氓 -_-)
欢迎加我微信「huab119」拉你进技术群,长期交流学习...
关注公众号「前端劝退师」,持续为你推送精选好文,也可以加我为好友,随时聊骚。
点个在看支持我吧,转发就更好了
如何让网页字体文件大瘦身?前端字体优化知多D相关推荐
- css引入本地字体文件,关于css中引入字体文件
关于css中引入字体文件 css样式代码: @font-face { font-family: Lovelo-Black;//定义font的名字 src: url(font/Lovelo Black. ...
- TureType/OpenType 字体瘦身、字体转换和字符替换
TureType/OpenType 字体瘦身.字体转换和字符替换 本文讲解下面一些关于 TTF/OTF 字体的基本知识和操作: 什么是TTF和OTF字体 删除/插入/替换字体中的字符 TTF/OTF ...
- PowerPoint演示文档大瘦身
PowerPoint演示文档大瘦身 摘自 PPT设计Blog 作者: nordridesign@gmail.com(tab) 开总结会的时候了,用PowerPoint编辑一个PPT演示文稿是必不可少的 ...
- WinSxS文件夹瘦身
WinSxS文件夹瘦身2014-5-8 18:03:32来源:IT之家作者:阿象责编:阿象 评论:27 刚刚,我们分享了如何用DISM管理工具查看Win8.1 WinSxS文件夹实际大小.对于WinS ...
- psd文件一键瘦身脚本使用详细步骤
psd文件一键瘦身脚本下载地址
- 老司机谈APK瘦身套路-项目优化篇
老司机谈APK瘦身套路-项目优化篇 在上一篇文章中,老司机带领大家一起学习了图片资源的瘦身套路,收到了很多中学生读者的好评. 想了解的童鞋请点击:blog.csdn.net/mynameishua- ...
- windows10大瘦身 - Chrome文件夹下可以删除的临时js文件
最近我的固态硬盘空间又不够了,所以开始windows10系统瘦身. 我在Chrome的这个文件夹下面发现了大量的临时js文件: C:\Users\i042416\AppData\Local\Googl ...
- 为Windows 7的winsxs文件夹瘦身,慎重。
刚使用Win7 系统不久,前段时间在清理系统垃圾时发现,win7系统的windows目录下的winsxs 目录占用空间非常大,想清理之,却提示无权限无法清理.随即在网上查了个究竟,原来winsxs是一 ...
- SpringBoot 部署 Jar 文件,瘦身优化指南 !
以下文章来源方志朋的博客,回复"666"获面试宝典 作者 | Java基基 来源 | https://mp.weixin.qq.com/s/Y5VK7TI1TQBN6O-k5O6h ...
- SpringBoot部署Jar文件,瘦身优化指南!
作者:xautlx gitee.com/xautlx/package-optimize-demo 本文截取代码片段来自于对应的完整示例源码工程: https://gitee.com/xautlx/pa ...
最新文章
- V4L2开发要点【转】
- 大话PHP设计模式:类自动载入、PSR-0规范、链式操作、11种面向对象设计模式实现和使用、OOP的基本原则和自动加载配置...
- Gazebo添加模型并控制模型运动作为动态障碍物(Ubuntu16.04, Gazebo7.16),附录动态链接库和静态链接库区别
- vue 为全局变量赋值_vue设置全局变量和修改
- JavaScript进阶4-学习笔记
- memcpy执行效率测试,无效测试
- ssh user@host command 与login host运行shell的区别
- easyui 图标下拉框
- UDP协议与TCP协议
- [转] 基于MBR 的bootkit的进展 鬼影-TDL4-BMW
- GANs是如何创造出高分辨率的图像的
- 软件系统上线前演示剧本
- python 输入整数_python输入整数
- 影子卫士和影子系统哪个好用_大小仅3M的影子系统,绿软爱好者必装软件
- 有IPV6无法登录IPV6网站*
- 05_grep-搜索
- Android 8.1 DisplayPowerController(三) 亮度调节
- python 实现布谷鸟算法(CS)
- 【技美百人计划】美术 2.2 模型基础
- 【网络安全态势感知学习笔记】——“行远自迩”基础篇一:网络安全态势感知的基本概念