带你看懂思源字体的各个版本都有什么区别

1. 前言

思源字体是 Adobe 提供的一套开源字体,包含了 思源黑体 source-han-snas思源宋体 source-han-serif思源等宽 source-han-mono。其开源协议允许商业用途,同时允许对其进行修改,因此非常适合使用。

我们以思源黑体为例,当我们打开其 Release 页面,可能并不知道我们所需要下载什么:

官方也提供了一个『简要』的下载说明,也会让人看的一头雾水:

2. 首先,我们先来分清一下什么是 OTF 与 OTC

OTF 全称 OpenType Font,OTF 全称 OpenType Collection。两者的前缀 OpenType 是一个现代化的字体规范,由微软和 Adobe 开发,它是一个跨平台的字体规范文件,因此对于操作系统来说,通常下载 OT* 的字体。

OTF 字体文件后缀为 .otf,在 Release 的 OTF 目录下可以找到根据特定语言版本区分的 OTF 文件,同时该目录下单个特定语言版本又包含了从 ExtraLight 到 Heavy 多个字重的字体文件:

OTC 字体在思源黑体中后缀为.ttc/.otc,其是对于 OTF 的打包封装,一个字体档中可以存在多个字形,在思源黑体中,OTC 对所有的特定语言不同字重的文件进行了打包,从而生成了如下几个文件:

OTC 字体的好处是在互联网上进行分发时,用户只需要下载一个文件就可以获取到整个系列的字体来使用,例如 MacOS 中打开 OTC 字体时就可以选择多个字形、字重来进行安装:

此外,思源字体还提供了 SuperOTC 版本,该字体版本是将所有的特定语言版本、字重版本的字体文件都打包在一个字体文件中了。

3. 特定语言版本、地区子集版本

当我们下载 OTF 字体时,会发现下载下来的字体是以语言体系为分类命名的,如下:

此外还有一个 SubsetOTF,这个文件夹中的字体是以地区为分类命名的,如下:

这就是思源字体的两种字形分类方式,按照『特定语言版本』分类,和按照『地区子集』分类,各个分类的具体区别如下:

特定语言版本

分类 说明 字体名
Japanese 日文 SourceHanSans
Korean 韩文 SourceHanSansK
SimplifiedChinese 简体中文 SourceHanSansSC
TraditionalChinese 繁体中文 SourceHanSansTC
TraditionalChineseHK 繁体中文(香港) SourceHanSansHC
特定语言版本的思源字体包含了所有地区写法的字形(字符数 65535 个),各个版本的大小一致,区别仅在于默认的语言版本不同,因此下载这个版本的字体是基本不存在『缺字』的情况的。

不同语言版本的字形区别很细微,借用 知乎 - 思源黑体版本指南 文中的示例:

由于特定语言版本的字体拥有所有的字形,因此可以利用 OpenType 的 locla 特性,在能够侦测语言的环境中自动切换地区字形。举例来说,当我们在 web 页面中中,如果 html 的 lang 属性设置为了 zh-CN 那么我们字体无论使用的是 SourceHanSansK 还是 SourceHanSansTC,字形都会被切换为『简体中文』,也就是 『SourceHanSansSC』的默认字形;类似的,如果设置为了 zh-HK,那么字形就会被切换为『繁体中文(香港)』,也就是『TraditionalChineseHK』的默认字形;但是如果设置的 lang 无法被识别为一个有效的地区,如 en-US,那么不同的字体就会使用默认的语言版本,如 SourceHanSansSC 字体使用『简体中文』,TraditionalChineseHK 使用『繁体中文(香港)』。

地区子集版本

地区 说明 字体名
CN 简体中文(大陆) SourceHanSansCN
HK 繁体中文(香港) SourceHanSansHK
TW 繁体中文(台湾) SourceHanSansTW
JP 日文 SourceHanSansJP
KR 韩文 SourceHanSansKR

地区子集版本的字体文件仅包含对应地区的字形,比如 JP、KR 仅包含了部分汉字,HK、TW 不包含简体与日文中的部分汉字,标点符号只存在一种该地区规范的字形,示例如下(未加粗的字体表示当前地区子集的字体中不包含该字形):

使用地区子集字体的好处是由于精简了不必要的字形,因此字体文件相对较小,比较适合在网页、嵌入式开发这类对体积敏感的场合使用。

4. 可变字体 Variable Fonts

在思源黑体的 Release 目录下,除了 OTF、OTC 字体文件之外,还有一个 Variable 文件夹(在下载资源里为 VF),该目录下的字体没有以字重作为区分,因为其利用了 OpenType 1.8 的可变字体特性。在该特性下,字体没有固定的字重,字体的粗细是可以无极调节的。在 web 中,这种字体可以使用 font-weight 来调整字重,而静态字体是无法通过样式来调整字重的。

关于更多可变字体的说明,可参考维基百科

5. OpenType 与 TrueType

在前面我们介绍 OTF 与 OTC 时已经简单讲了 OpenType 是一种字体规范,当我们在 css 中声明 font-face 时在添加 OTF 字体时也会声明字体格式为 oepntype

css 复制代码
@font-face {
	font-family: "otf-SimplifiedChinese-bold";
	src: url("./fonts/otf/SimplifiedChinese/SourceHanSansSC-Bold.otf")
	  format("opentype");
}

同时还存在另外一种字体标准 TrueType,其文件后缀格式为 .ttf,这两种字体标准的关系还要从起发展讲起。

在最初,计算机字体都是有一个个像素点拼凑的点阵文字,随着计算机分辨率的提升以及印刷技术的发展,Adobe 发明了 PostScript,让计算机可以使用向量描述字体,使得字体变得平滑,此时的字体规范为 PostScript Type1。由于 Adobe 不愿意把 PostScript 提供给 Apple,因此 Apple 和 Microsoft 在 1989 年合作推出了 TrueType,目的就是为了替代 Adobe 的 PostScript Type1 规范。然而到了 1997 年,微软又反水找到了 Adobe 合作,推出了 OpenType 规范,并提交给了 ISO 组织,成为了国际上的通用字体规范标准发展至今。

到这里你或许会觉得 OpenType 只不过是比 TrueType 更新的一个标准,但事实上还是有亿点复杂的:

  • 首先,OpenType 是基于 TrueType Open 的,并且被设计为向上兼容,因此可以将 OpenType 看做为 TrueType 的一个扩展标准,而并不是全新的一个标准。
  • 其次,现代化的 TrueType 字体都必须遵循 OpenType 规范 ,因此对于那些符合 OpenType 规范的 TrueType 字体来说,.ttf 格式的扩展名甚至可以换成 .otf,在 css 中声明 font-family 时对 .ttf 扩展的字体使用 format('oepntype') 也是合适的。
  • 此外,TrueType 在技术实现上使用了二次贝塞尔曲线来描述字体轮廓,而 OpenType 规范下既允许使用二次贝塞尔曲线,又允许使用 PostSCript Type 1 的三次贝塞尔曲线,但不能仅通过扩展名来区分字体轮廓使用了哪种贝塞尔曲线。
  • 最后,尽管 OpenType 更优越,TrueType 由于进入市场较早,更多人熟悉创建 TrueType 字体的过程,因此无论是资源数量还是流行度上都更占优势。

最后附上一张图,展示了 TrueType 和 OpenType 的包含关系:

其他

  • HW:等宽字体,字符宽度都相同的电脑字体,简单理解为两个英文单次宽度等同于一个中文字符。
  • WOFF:Web 开放字体格式,字体文件后缀为 .woff,采用了压缩格式,在网络传输中更占优势,其可以由 TTF 与 OTF 字体封装得来。

参考文献

相关推荐
寻找沙漠的人19 分钟前
前端知识补充—CSS
前端·css
NoneCoder4 小时前
CSS系列(29)-- Scroll Snap详解
前端·css
无言非影4 小时前
vtie项目中使用到了TailwindCSS,如何打包成一个单独的CSS文件(优化、压缩)
前端·css
羊小猪~~4 小时前
前端入门之VUE--ajax、vuex、router,最后的前端总结
前端·javascript·css·vue.js·vscode·ajax·html5
前端Hardy9 小时前
HTML&CSS:酷炫的3D开关控件
前端·javascript·css·3d·html
devotemyself9 小时前
vue的ElMessage的css样式不生效
前端·css·vue.js
noravinsc10 小时前
css代码加密
前端·css·tensorflow
别发呆了吧10 小时前
前端准备面试题总结(css+js+ES6+vue+http+项目场景+地图相关问题)
前端·javascript·css
阿征学IT11 小时前
圣诞快乐(h5 css js(圣诞树))
前端·javascript·css
一枚前端小卡拉米11 小时前
css 颗粒度
前端·css