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

2023-10-27

字体概念.001

前言

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

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

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

TTF(TrueType Font)

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

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

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

其兼容性如下:

image-20220130224859429

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%。

其兼容性如下:

image-20220130224605119

WOFF2

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

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

其兼容性如下:

image-20220130224713567

补充概念

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

Type 1 字体

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

image-20220130211511220

Type 2 字体

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

总结

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

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

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

~
本文完,感谢阅读!

~

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

大家好,我是〖编程三昧〗的作者 隐逸王,我的公众号是『编程三昧』,欢迎关注,希望大家多多指教!

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

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

  • 指定 body CSS 宽度安全吗?

    现在通常满足于以一定的尺寸居中 div Blah div 不使用包装器进行对齐和大小并直接将其应用到body tag 像这样 Blah 尺寸是
  • Django - 渲染到字符串无法加载 CSS

    我正在尝试使用 Django 1 8 render to string 通过管理命令将 html 转换为 pdf 而不是使用 View request 以下代码可以将模板转换为 pdf 但它无法将 CSS 加载到模板中 def html t
  • chrome css 动画上的抖动

    尝试使用两个具有相同背景图像 svg 的居中 div 制作一个从中心淡入图像的 css 动画 并为其宽度和背景位置设置动画 问题是 在 chrome 上 存在严重的抖动问题 也许是 chrome 循环执行动画步骤 而不是同时执行它们 这是j
  • 根据窗口大小调整 div 及其内部内容的大小

    我已经查找了一百万种技术 但我无法让它发挥作用 我知道还有其他类似的帖子 如果它给任何人带来麻烦 我很抱歉 但我需要针对我的代码的具体说明 因为我很愚蠢 提前非常感谢 我希望 div 容器 contentContactBox 以及其中的所有
  • 如何仅在单击子级时触发父级单击事件

    子级和父级都是可点击的 子级可以是带有 jQ uery 单击事件的链接或 div 当我点击子事件时 如何只触发父事件而不触发子事件 DOM 事件阶段 活动分为三个阶段 Capture 第一阶段是 捕获 其中从事件处理程序开始调用
  • 显示居中的图像行

    我有一排三张图像 目前显示得很好 现在 我想在这三个图像的正下方显示另外两个图像 并且我希望它们居中 它看起来有点像一个颠倒的金字塔 无论我做什么 底行都保持左对齐 这是 css category width 176px font size
  • jQuery hide() 动画向右滑动

    使用 jQuery 的hide 使用可选的持续时间参数的函数 我可以在我的网站上获得一些警报框 以优雅地滑出屏幕并消失 隐藏动画的默认方向似乎是向左滑动 尽管此行为未在hide 定义页 http api jquery com hide 我需
  • 将自定义 CSS 添加到使用 Compass 生成的精灵中

    我有这个代码my images scss file icon layout smart icon sprite dimensions true import icon png include all icon sprites 输出是这样的
  • 可以在 IE 中的表格行上添加渐变吗?

    当我将鼠标悬停在表格特定部分的表格行上时 我希望背景更改为线性渐变 CSS 很简单 tbody row links tr hover background typical multi browser linear gradient code
  • CSS - 为什么我无法设置 元素的高度和宽度?

    我正在尝试使用以下 html 标记创建 css 按钮 a href access php class css button red Forgot password a 但它最终不会比中间的文本大 即使我已经设置了班级的高度和宽度 顺便说一句
  • 输入数字最大属性调整字段大小

    当在 Chrome 中向输入数字字段添加最大值时 它将根据最大值的宽度重新调整字段的大小 看来我无法控制调整大小的行为
  • 是否可以在 Javascript 中的 css3 转换期间获取目标计算的 css 属性值?

    是否有可能在 Javascript 中的 css3 转换期间获取目标 最终 计算的 css 属性值 我找到了这个答案 是否可以在 Javascript 中的 css3 转换期间获取目标 css 属性值 https stackoverflow
  • 如何使用 Bourbon Neat Framework 实现移动优先

    我一直在使用 bourbon clean 来进行桌面优先布局 效果很好 不过 我想做一个移动优先版本 从移动开始 然后逐步向上 默认网格为 12 列 对于移动设备 我通常使用 4 列网格 我尝试将网格更改为 4 列 然后扩展到 12 列 但
  • iPad Safari 100% 高度问题

    我的页面上有一个模态 div 它使背景变灰 如果我将overlay div的高度设置为100 它在IE 桌面 上工作正常 但在iPad Safari上 完整的高度不会变灰 究竟是什么问题 这与固定位置 视口有关吗 请帮忙 下面是相同的 CS
  • 粘表行

    我正在尝试实现一个像 iOS 那样的日历列表视图 基本上 我现在正在做的就是循环遍历我的事件数组 如果是新日期 则打印日期标题 否则打印日历事件 我想让日期标题行保持粘性 直到它们 滚动走 我怎样才能做到这一点 我看到很多关于粘性标题的示例
  • 如何使用 jQuery 在按下按钮后保持按钮处于活动状态

    我见过一些非常相似的问题 但一直无法找到我正在寻找的答案 我已经确定了解决方法 但想知道执行该任务的正确方法 我想要的是单击按钮并使活动状态保持不变 下一次单击将切换状态 这是所需的 我真正需要知道的是如何解决 uiButton activ
  • Mobile Safari (iPhone) CSS 垂直居中/行高 CSS 问题

    有一个问题 我一直试图在各个项目中解决 但运气不佳 我有一些divs 内的文本以 CSS 为中心 使用display block and line height 我也尝试过padding和固定的高度 通常 这些设置要么只是标题 要么有时是按
  • 如何在 HTML 表格上使用分页?

    我正在尝试使用这个分页library http flaviusmatis github io simplePagination js 在我的 HTML 表格页面 特别是浅色主题 中 但不知何故 我无法理解如何在我的 HTML 页面中以这种方
  • 响应式2列2行布局

    我一直在试图弄清楚如何创建这个布局 我有一个 2 列布局 左列有 1 行 右侧有 2 行 我试图让它流畅地调整 我遇到的问题是 我希望右侧顶部图像的顶部与左侧图像的顶部对齐 而底部图像的底部与左侧图像的底部保持对齐 我应该使用桌子吗 这是我
  • 我如何用 javascript/jquery 进行两指拖动?

    我正在尝试创建当有两个手指放在 div 上时拖动 div 的功能 我已将 div 绑定到 touchstart 和 touchmove 事件 我只是不确定如何编写这些函数 就像是if event originalEvent targetTo

随机推荐

  • 【Hyper-v 管理器虚拟机配置内网外网固定ip】

    1 Default Switch Hyper v默认虚拟网卡 无法设置固定ip Hyper V自带一个不能删除的Default Switch虚拟交换机 虚拟机使用该网络可以自动获取IP直接上网 但这个网络的网关地址每次重启后都会改变 所以你
  • 原生Servlet与Spring Controller性能比较

    在实际项目工作 有同事提出 Java原生的Servlet性能 响应速度与并发数 要比封装过的Spring Controller高 基于这点 楼主用Apache的ab工具 对两个简单的应用做1000并发压力测试 查看两者的响应速度与并发数 平
  • 元旦过后

    今天是13号了 自从元旦过后 就一直没有做什么事情 觉得好空虚啊 一心只盼望着过年放假回家 哎 感觉熬日子啊 本来就觉得日子过得好快 却还不懂得珍惜 不能这样了哈 在回家之前先做点有用的事情吧 讲一个小故事吧 一天 有一个姑娘去买红薯 本来
  • 解决video标签播放m3u8格式视频失败问题

    前言 什么是m3u8 效果 效果地址 m3u8视频切换 效果图片 解决方法 采用video js插件 引入 引入videoJS插件样式文件 引入videoJS插件JS文件 引入videoJS插件播放m3u8格式视频的HLS功能 HTML代码
  • 定时检测接口是否正常飞书告警脚本

    第一版 支持多个接口地址 循环检测 定时每分钟执行一次脚本 告警效果 脚本 飞书机器人创建忽略跳过 各大协作平台大同小异拿出机器人hook地址 bin bash URL LIST https gatewaxxxxxxxxxxxxxxxxxx
  • 笔记本电脑键盘失灵一键修复_笔记本部分按键失灵的键盘可以用了,省下键盘的钱...

    情况 笔记本曾经拆装 清理灰尘之类 也重装过系统 键盘可以使用 就是部分按键失灵 触控板正常使用 驱动也安装了 最初判断 键盘坏了 但笔记本电脑键盘拆卸比较麻烦 没有动手 实际原因 驱动问题 处理方法 更新驱动即可 具体操作如下 右击此电脑
  • python逻辑判断

    1 if语句 info my name is xiaomu info list info split print info list if info list 0 xiaomu info list 0 dewei if info list
  • 【Matlab】二维图绘制及填色总结(basic)

    编程渣的艰难探索之Matlab绘图 个人需求 用matlab绘制多条曲线并在指定不规则区域填色 为什么一定要用Matlab呢 因为我觉得图形便于修改 看起来较为正规 代码量较少 1 同时绘制多条曲线 1 1 基本代码 真的很基础 x 0 0
  • redis在springboot中如何配置并启动

    在Spring Boot中配置和启动Redis非常简单 首先你需要安装Redis 然后添加一个Redis的配置文件 然后在Spring Boot的配置文件中添加相关的Redis配置信息 最后通过Spring Boot启动Redis即可
  • linux搭建FTP服务器步骤

    linux搭建FTP服务器 在linux操作系统中搭建ftp服务器 ftp服务器会提供三种远程登录方式 分别是匿名登录方式 本地用户方式和虚拟用户方式 这里我将把这三种搭建ftp服务器的操作步骤分享出来 供大家参考 一 匿名搭建 1 安装F
  • 22年字节跳动飞书人力套件二面面经

    前言 前文链接 https www hengy1 top article c956b8c6 html 简单介绍本次面试 波澜起伏吧 面试完自己心里没有啥底 24届本科菜鸡 没网上问的那么难 八股偏少 话不多说了直接来个复盘 二面 70min
  • logging模块学习

    logging 基础知识 logging的基础知识 logging basicConfig 参数介绍 filename 创建一个 FileHandler 使用指定的文件名 而不是使用 StreamHandler filemode 如果指明了
  • go socket编程

    8 1 Socket编程 在很多底层网络应用开发者的眼里一切编程都是Socket 话虽然有点夸张 但却也几乎如此了 现在的网络编程几乎都是用Socket来编程 你想过这些情景么 我们每天打开浏览器浏览网页时 浏览器进程怎么和Web服务器进行
  • kafka查询指定消费Group未消费的数据

    最近线上出现kafka生产者发送成功了 但是消费者没有拉取到 出现这种现象是偶发的 就是在几分钟内有几个消息没消费到 后面就没再出现过 首先先去卡夫卡上确认是否有消息堆积 下载kafka 不是src版的哦 http kafka apache
  • SQl CASE WHEN 语句的嵌套使用方式

    select id userid ys case when pj ys is NULL then case when pj ys1 is NUll then ys else pj ys1 end else pj ys end t from
  • 技巧分享篇---如何从GitHub上下载某个项目中单个文件的方法

    前言 梦想就是一种让你感到坚持就是幸福的东西 技巧分享篇 如何从GitHub上下载某个项目中单个文件的方法 一 Github项目里的单个js文件下载实例演示 1 点击查看文件 2 点击源码 Raw 3 通过 ctrl s 保存即可 二 Gi
  • Obsidian利用插件Remotely-save实现超低成本全平台云笔记

    Obsidian作为一个笔记软件 是目前最满足我需求的了 本地存储文件 Markdown格式作为基础 双链支持 以及好用的搜索等功能 基本实现了我对一款文字笔记软件的要求 但是Obsidian的收费价格确实不低 虽然软件本身的所有功能基本免
  • Visual Unit 简明教程

    载自 http www vckbase com index php wv 1270 VU1 0 简介 Visual Unit 简称VU 是新一代单元测试工具 功能强大 使用简单 完全可视化 不需编写测试代码 VU的测试结果使程序行为一目了然
  • UNIX系统被删文件的恢复策略

    与DOS Windows不同 UNIX文件被删除后很难恢复 这是由UNIX独特 的文件系统结构决定的 UNIX文件目录不像DOS Windows那样 文 件即使被删除之后仍保存有完整的文件名 文件长度 始簇号 即 文件占有的第一个磁盘块号
  • TTF、TOF、WOFF 和 WOFF2 的相关概念

    前言 在上一篇文章中 我引入了 TTF 格式的字体文件来解决各平台字体表现不统一的问题 但其实那不是最优解决方案 因为字体文件不止有 TTF 格式 常见的字体格式还有 OTF WOFF 和 WOFF2 等 今天 我来总结一下最常见字体格式的