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 的相关概念 的相关文章

  • React Native 上的文本缩进

    我需要缩进 React Native 段落的第一行 但使用常见的csstext indent财产 textIndent 与 React Native 不兼容 伪元素选择器也不兼容 例如 first line 有什么方法可以做到这一点而不用将
  • 如何检查元素的内容是否为空,如果是,则在 jquery 中删除该元素

    我目前正在尝试选择某个 div 内没有内容的任何 h2 元素并将其删除 这是我的 html 代码 div class skipToContainer h2 class vidSkipTo Hello h2 h2 class vidSkipT
  • c# 如何生成锦标赛括号 HTML 表

    所以我已经被这个问题困扰了三个星期 但我一生都无法弄清楚 我想做的是使用表格获得这种输出 演示 http www esl world net masters season6 hanover sc2 playoffs rankings htt
  • 有没有办法在 html 图像标签中显示位图数据? [复制]

    这个问题在这里已经有答案了 有没有办法在 HTML 元素中显示位图图像数据 例如 您有一个指向源文件的常规图像 如下所示 img src myImage png width 100 height 100 有没有这样的事情 img width
  • 响应式导航栏隐藏其下方的元素

    我创建了一个响应式导航栏 但它使下面的元素 Flexslider 插件 消失 在我制作导航栏之前 下面的 Flexslider 可以正常显示 但现在不行 导航栏的 z index 为 2 所以我不知道问题是什么 我应该如何 更改什么才能允许
  • 在 IE 8 及以下版本中动态添加 @font-face 规则

    我使用 IE stylesheet addRule 方法添加 font face 规则 但是 符号对于该方法的 选择器 参数来说是不允许的字符 因此我收到 无效参数 错误 s addrule font face font family Fo
  • 使用 CSS 的平行四边形导航背景

    我正在尝试创建此导航菜单 绿色突出显示是活动页面 灰色是悬停状态 我可以使用以下 CSS 制作平行四边形 ul nav li a text decoration none padding 4px 10px border radius 3px
  • 禁用引导列上的滚动

    我正在尝试禁用引导列上的滚动 这是我的代码 div class container fluid h 100 div class row h 100 div class col 4 h 100 bg dark fixed div div cl
  • 如何更改bootstrap中form-control弹出窗口中必填字段的默认消息?

  • 如何在使用页面锚点导航时设置“激活”类以在 Angular 2 中引导导航栏?

    我正在使用 Angular 2 和 Bootstrap 4 创建一个单页网站 我创建了一个始终位于页面顶部的导航栏组件 并且我正在使用页面锚点导航 id 请注意 我还没有创建路由模块 到目前为止还没有必要这样做 导航栏代码如下
  • 避免响应式页面的重复内容

    我目前正在做一个涉及响应式设计的项目 整个布局应该使用HTML和CSS来实现 我知道可以使用 java 脚本将内容从一个列布局移动到另一列布局 而无需复制内容 但是使用 HTML 和 CSS 是否可以实现相同的效果 以下面的例子为例 它会在
  • 如何仅在最后一个
  • 处给出透明六边形角度?
  • 我必须制作这样的菜单 替代文本 http shup com Shup 330421 1104422739 My Desktop png http shup com Shup 330421 1104422739 My Desktop png
  • 为什么元素上的负底部边距会降低该元素父元素的高度?

    这可能是由于边距折叠造成的 我知道边距折叠 至少知道它如何影响相邻元素 但我不明白当涉及负边距时它如何在嵌套元素上工作 例如 在此标记和随附的 CSS 中 Markup div class parent div class child Ch
  • 带有相对路径的 LESS CSS 背景

    我在使用 LESS 作为我的网站的样式表时遇到了问题 就我个人而言 我宁愿在CSS中使用相对路径而不是绝对路径 这只是我的习惯 但是现在当我使用带有导入功能的LESS时 我遇到了如下所示的问题 我有一个main less根文件夹中的文件 i
  • 如何将div对齐到页面底部,而不是屏幕底部

    我想将 div 与页面底部对齐 而不是与屏幕底部对齐 当我这样做时 contact block position absolute bottom 0 left 0 div 被放置在屏幕的底部区域 当我的页面很长时 我必须向下滚动 并且本应位
  • jQuery 更改事件未在输入元素上触发

    首先 我检查了与我的问题类似的每个主题 不幸的是 我还没有找到答案 我尝试结合一些答案 但没有成功 注 刚开始学习jQuery 所以这是我的问题 我创建了一个带有四个文本输入和一个按钮的表单 每个输入内部都有一个 svg 图标和一个占位符文
  • css3动画硬闪烁(帧之间没有淡入淡出)

    尝试使用 css3 动画连续闪烁三个元素 我已经让它运行了 但是每一帧都有一个淡入淡出 我想将其删除 理想情况下 每个元素保持可见 1 秒 然后立即隐藏 我尝试将动画设置为帧0 and 99 for opacity 1 and 100 fo
  • Windows Phone 8 中的 Webview 弹跳

    我需要知道是否有任何方法可以控制 Windows 8 中的 webview 弹跳属性 我已经尝试过 ms touch action none 它确实会停止弹跳 但会禁用应用程序中的整个滚动 我已尝试以下方法 但这些方法不起作用 backfa
  • 使用 CSS Flexbox 堆叠图像

    我正在学习使用CSSflexbox 和我想在左侧渲染一个大图像 并在彼此之上渲染两个小图像 我怎样才能使用CSS弹性盒 div class container img class image1 src alt null img class
  • 如何在 Bootstrap 3 中制作进度条动画?

    我正在尝试为 Bootstrap 进度条设置动画 但我不知道该怎么做 我得到了宽度的值但是console log bar width 返回宽度px但不是 如内联所示style width 90 我用代码重新创建了一个 bootply Boo

随机推荐

  • 【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 等 今天 我来总结一下最常见字体格式的