TTF、TOF、WOFF 和 WOFF2 的相关概念

简介: 在上一篇文章中,我引入了 TTF 格式的字体文件来解决各平台字体表现不统一的问题。

7.png


前言


在上一篇文章中,我引入了 TTF 格式的字体文件来解决各平台字体表现不统一的问题。

但其实那不是最优解决方案,因为字体文件不止有 TTF 格式,常见的字体格式还有 OTF、WOFF 和 WOFF2 等。


今天,我来总结一下最常见字体格式的相关概念,方便以后在使用的时候可以做出最优选择。


TTF(TrueType Font)


TrueType 是由美国苹果公司和微软公司共同开发的一种电脑轮廓字体(曲线描边字)类型标准。


这种类型字体文件的扩展名是 .ttf,类型代码是 tfil。


TrueType的主要强项在于它能给开发者提供关于字体显示、不同字体大小的像素级显示等的高级控制。


其兼容性如下:


6.png


OTF(OpenType Font)


OpenType 是 Adobe 和 Microsoft 联合开发的跨平台字体文件格式,也叫 Type 2 字体,它的字体格式采用 Unicode 编码,是一种兼容各种语言的字体格式。


OpenType 也是一种轮廓字体,比TrueType 更为强大,并且还支持多个平台,支持很大的字符集,还有版权保护。可以说它是Type 1和 TrueType 的超集。


OpenType 标准定义了 OpenType 文件名称的后缀名:


  • 包含 TrueType 字体的 OpenType 文件后缀名为 .ttf
  • 包含 PostScript 字体的文件后缀名为 .OTF
  • 如果是包含一系列 TrueType 字体的字体包文件,那么后缀名为 .TTC


OTF 的主要优点有:


  1. 增强的跨平台功能;
  2. 更好的支持Unicode标准定义的国际字符集;
  3. 支持高级印刷控制能力;
  4. 生成的文件尺寸更小;
  5. 支持在字符集中加入数字签名,保证文件的集成功能。


同一个 OpenType 字体文件可以用于 Mac OS,Windows 和 Linux 系统,这种跨平台的字库非常方便于用户的使用,用户再也不必为不同的系统配制字库而烦恼了。


OTF 的兼容性和 TTF 相同。


WOFF(Web Open Font Format)


Web 开放字体格式是一种网页所采用的字体格式标准。此字体格式发展于 2009 年,现在正由万维网联盟的 Web 字体工作小组标准化,以求成为推荐标准。


此字体格式不但能够有效利用压缩来减少档案大小,并且不包含加密也不受 DRM(数位著作权管理)限制。


WOFF 本质上是包含了基于 sfnt 的字体(如 TrueType、OpenType 或开放字体格式),且这些字体均经过 WOFF 的编码工具压缩,以便嵌入网页中。这个字体格式使用zlib压缩,文件大小一般比 TTF 小 40%。


其兼容性如下:


5.png


WOFF2


WOFF 2 标准在 WOFF1 的基础上,进一步优化了体积压缩,带宽需求更少,同时可以在移动设备上快速解压。


与 WOFF 1.0 中使用的 Flate 压缩相比,WOFF 2.0 是使用 Brotli 方法进行的压缩,压缩率更高,所以文件体积更小。


其兼容性如下:


4.png


补充概念


在上面的概念中,出现了 Type 1 字体Type 2 字体的说法,我在这里补充一下它们两个的相关概念。


Type 1 字体


Type 1 字体于 1984 年由 Adobe 引入,与其 PostScript 页面描述语言一起使用,随着可使用 PostScript 的桌面出版软件和打印机的普及而得到了广泛使用。1996 年,Adobe 产品和文字开发开始重点关注用途更为广泛的 OpenType 字体,对 Type 1 的关注减少了。


3.png


Type 2 字体


Open Type 字体也叫 Type 2 字体,这个叫法其实也是为了对应 Type 1 字体而产生的,表示比 Type 1 更进一步。


总结


通过上面的概念,可以看出:


  • TTF 的兼容性更好,但是其字体文件体积最大。
  • WOFF 字体比 TTF 字体有更小的体积和更好的表现性。
  • WOFF 2 字体是对 WOFF 字体的升级。


所以,如果不考虑兼容性的话,字体使用首推 WOFF 2 ,这也是我在文章开头说使用 TTF 并非最优解决方案的原因,大家可以根据自己的实际情况,酌情选择合适的字体文件,以达到性能优化的目的。


~ 本文完,感谢阅读!


学习有趣的知识,结识有趣的朋友,塑造有趣的灵魂!




相关文章
|
2月前
|
数据采集 机器学习/深度学习 人工智能
反爬虫机制深度解析:从基础防御到高级对抗的完整技术实战
本文系统阐述了反爬虫技术的演进与实践,涵盖基础IP限制、User-Agent检测,到验证码、行为分析及AI智能识别等多层防御体系,结合代码实例与架构图,全面解析爬虫攻防博弈,并展望智能化、合规化的发展趋势。
反爬虫机制深度解析:从基础防御到高级对抗的完整技术实战
|
12月前
|
人工智能 自然语言处理 决策智能
DRT-o1:腾讯推出专注于文学翻译的 AI 模型,擅长理解比喻和隐喻等修辞手法,在翻译时保留原文的情感色彩
DRT-o1 是腾讯研究院推出的文学翻译系列 AI 模型,通过长链思考推理技术显著提升翻译质量,特别擅长处理比喻和隐喻等修辞手法。
420 2
DRT-o1:腾讯推出专注于文学翻译的 AI 模型,擅长理解比喻和隐喻等修辞手法,在翻译时保留原文的情感色彩
免费证书certbot-aliyun
免费证书certbot-aliyun
1221 1
Vue3空状态(Empty)
这是一个可高度定制化的空状态组件,支持自定义描述内容、描述样式、图片显示方式及样式、底部内容等属性。提供两种预设图片风格(filled/outlined)或自定义图片链接。在线预览与详细代码示例可见[此处](https://themusecatcher.github.io/vue-amazing-ui/guide/components/empty.html)。组件使用了`useSlotsExist`工具函数来判断插槽是否存在。通过简单配置即可实现多样化的展示效果。
236 3
Vue3空状态(Empty)
|
机器学习/深度学习 人工智能 vr&ar
【深度学习】python之人工智能应用篇——图像生成技术(一)
图像生成是计算机视觉和计算机图形学领域的一个重要研究方向,它指的是通过计算机算法和技术生成或合成图像的过程。随着深度学习、生成模型等技术的发展,图像生成领域取得了显著的进步,并在多个应用场景中发挥着重要作用。
427 6
|
Android开发 Windows
mac下Android Studio 快捷键(持续更新)
mac下Android Studio 快捷键(持续更新)
792 1
|
前端开发
让按钮活起来:常用按钮动画效果,增强网页吸引力!
让按钮活起来:常用按钮动画效果,增强网页吸引力!
Vue3+Vite+Pinia+Naive后台管理系统搭建之四:Naive UI 组件库的安装和使用
Vue3+Vite+Pinia+Naive后台管理系统搭建之四:Naive UI 组件库的安装和使用
1011 1
|
SQL Oracle 关系型数据库
解读数据传输DTS技术架构及最佳实践
在阿里云数据库技术峰会上,阿里巴巴高级技术专家付大超(千震)针对于云计算时代最好的数据传输产品阿里云DTS的架构设计、基本原理以及相关的应用场景进行了精彩分享。帮助大家了解了阿里是如何实现异地多活和异构多活的,以及通过DTS轻松实现迁移、双同同步、容灾、订阅的真实案例。
14801 1