惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

博客园 - 三生石上(FineUI控件)
U
Unit 42
人人都是产品经理
人人都是产品经理
罗磊的独立博客
Recent Announcements
Recent Announcements
云风的 BLOG
云风的 BLOG
aimingoo的专栏
aimingoo的专栏
T
Tailwind CSS Blog
GbyAI
GbyAI
Blog — PlanetScale
Blog — PlanetScale
I
InfoQ
Last Week in AI
Last Week in AI
宝玉的分享
宝玉的分享
B
Blog RSS Feed
WordPress大学
WordPress大学
腾讯CDC
H
Help Net Security
博客园 - Franky
博客园 - 【当耐特】
博客园 - 聂微东
Stack Overflow Blog
Stack Overflow Blog
B
Blog
Vercel News
Vercel News
博客园 - 司徒正美

少数派

派早报:Google 发布 Fitbit Air 等 - 少数派 「新人报到」確認需求,再開始 - 少数派 从 SOLO 独立开发者社区,我看到了越来越多开发者开始做自己的产品 - 少数派 我怎么管理那些"不常做,但总会忘"的生活事项 - 少数派 人形机器人量产元年,数据才是具身智能的“生死线” - 少数派 BuhoLaunchpad 高度还原 Mac 启动台:开发历程与思考 - 少数派 五年陪伴依然不舍,DIY 换壳后让罗技 MX Master 3 继续服役 - 少数派 新玩意 240|少数派的编辑们最近买了啥? - 少数派 一日一技|为什么你应该关闭 iOS 的键盘声音 - 少数派 我做了个插件和 Skills,一键提取任何网站的设计规范 Design.md - 少数派 住在三四线城市的你,该开始录播客了 - 少数派 甘南秘境,大白高国 - 少数派 AI的审美:谁让把我变成川内倫子 - 少数派 返工怎能不烦恼,打工人片单总有一部是你的「嘴替」 - 少数派 为了让「上厕所」更健康,我做了一个小工具 - 少数派 AI + Skill,能够让生成的文章去除 AI 味吗? - 少数派 新玩意|韶音OpenDots ONE 耳夹式耳机 - 少数派 《美满》| 在每一个春天的晚上相爱(362) - 少数派 新玩意|优篮子 PS01 MagSnap 磁吸支架 - 少数派 自我整合手记 | 我开始早睡了:用稳定规则,为自由托底 - 少数派 用龙虾(OpenClaw)两个多月,我最深的12个体会 - 少数派 听歌时间到,12 张你可能错过的 2025 华语乐坛好专辑 - 少数派 承诺能追吗 - 少数派 macOS 26启动台没了? 我做了个不一样的App启动器 - Keboard - 少数派 《四海为家的人》| INTJ对话INTJ(361) - 少数派 你发过的那些黑历史,是时候一次清干净了 - 少数派 新玩意:安安静静玩,越玩越专注:计客密码机 - 少数派 iPad 用户首次体验 Android 平板:vivo Pad6 Pro - 少数派 数据逻辑强 - 少数派 极北行+ | 一路向北,探访日本至北之地 | 001 - 少数派
思源宋体,如何评价,以及如何正确使用 - 少数派
2017-04-06 · via 少数派

2017 年 4 月 3 日,Adobe 联合 Google 发布了思源宋体。思源宋体是 思源黑体 的兄弟字体,同样支持繁简中文、日文、韩文四种语言,同样包含七种字重,同样使用 OFL 自由授权,并在 GitHub 上开源。我国的常州华文字厂也参与了字体设计。思源宋体遵循 GB 18030 和通用规范汉字表,包含 8105 个规范字。

如何评价

思源宋体对于汉文字体届的贡献完全不亚于思源黑体。

如果操作系统并没有合适的字体来显示对应的字符,它就会被显示成「豆腐块」。Google 希望通过让开源 Noto 字体家族覆盖所有 Unicode 字符的方式来彻底告别「豆腐块」的存在,而「思源」系列字体便是 Noto 字体家族针对中文、日文和韩文(Chinese、Japanese、Korean,CJK)的重要子集。之前的思源黑体是无衬线字体,而这次的思源宋体是衬线字体。

「思源」系列字体最显著的特征是其开源免费的授权方式,即使是商业使用也毫无限制。这种授权方式可以最大化「思源」的普及率,再加上后来 Google 将其内置到 Android 中,你可能在不知不觉中已经成为思源字体的受益者。

但是以此概括思源字体的贡献未免太过于狭隘。上文提到,思源字体是针对四种字型的字体,这就意味着思源可以完美显示同一个汉字在不同语言中的变种,这样一来四个区域的人都不会觉得奇怪。

思源字体还支持七种字重,这在汉字字体历史上是极为罕见的。在思源字体之前,大部分中文字体只有两个字重(常规、粗体),微软雅黑有三个字重(细体、常规、粗体)。之后发布的苹果「苹方」字体支持六个字重,也不如思源字体丰富。

除此之外,Adobe Typekit 服务还允许你免费将思源系列字体用到网站上,虽然免费套餐有一定的流量限制。

对比 macOS 系统内置的宋体,思源宋体不但字重更丰富,并且字面更大,易读性稍好。Windows 内置宋体直接负分出局。相比思源黑体这种非衬线字体,思源宋体更适合正式的文档,感觉更庄重。

需要指出的是,由于思源字体由 Google 和 Adobe 联合开发并发行,虽说中文名称相同,但是并没有统一的英文名称。Google 将思源字体归入旗下 Noto 字体家族,因此思源黑体的名字为 Noto Sans CJK,思源宋体的名字为 Noto Serif CJK;Adobe 将思源字体归入旗下 Source 字体家族,因此思源黑体的名字为 Source Han Sans,思源宋体的名字为 Source Han Serif。这一点带来的影响随后说明。

思源字体也内置了西文,其西文部分使用的是 Adobe Source 家族字体,即思源黑体集成 Source Sans Pro、思源宋体集成 Source Serif。无论是 Google 还是 Adobe 发行的版本都是如此。

如何正确使用

下载页面:GitHubGoogle

在本地使用

Adobe 提供了多语言的 下载指南(PDF),中文部分如下图所示

如果你已经升级了 Windows 10 创作者更新,也可以直接下载 Super OTC 版本。下载好对应的版本之后,便可以安装了。

在 Windows 10 上,双击打开字体即可选择安装。在 Windows 8 及之前的版本中,需要打开控制面板 – 外观与个性化 – 字体,将下载好的字体拖到里面。

在 macOS 上,双击打开字体即可选择安装。

在 iOS 7 及以上版本中,安装字体需要从 App Store 下载 AnyFont 或者 WorkFlow。具体的方法可以参考我派的 这篇文章 或者我的 这篇文章。iOS 6 及以前版本不支持安装字体。

直到 Android 7.1,Google 还不允许用户安装字体。某些 ROM 允许用户替换系统默认字体,详情请咨询相关客服。

上文提到,思源字体西文部分使用的是 Adobe Source 家族字体,因此如果想要搭配 Noto 字体家族使用,需要明确声明在西文部分使用 Noto 字体。

在网页中使用

思源这么强大的字体,当然会有站长想要使用。我的博客就已经在标题处使用了思源宋体,在大部分浏览器上显示都不会难看。

在网页中使用中文字体一向比较困难,其中最主要的原因是中文字体往往体积过大,西文字体一般可以在百 KB 左右解决问题,而中文字体少则几个 MB,大则上百 MB,这样会严重拖慢网站的加载速度。可能是出于这样的原因,Google Font 也并未托管思源字体。

庆幸的是,Adobe Typekit 服务提供了对思源字体的托管,只需要注册一个 Adobe 账户,便可以免费使用思源系列字体。免费账户的访问量会有一些限制,升级账户需要付费。但是对于个人博客来说,免费账户足够用了。

你可以顺着 Adobe 官方的指导 来创建账户、将字体添加到 kit 并将相应的 JavaScript 脚本添加到页面的 <footer> 中。Typekit 脚本会在网页加载完成后再加载字体,并且会根据需要只加载需要的字符,大幅提升速度。但是即使是如此,中文字体的加载还是会相对缓慢,所以不建议大篇幅使用动态字体,文章正文还是使用系统内置字体更好。Typekit 使用的是 Akamai CDN 服务,在国内的速度差强人意(差强人意:大体令人满意)。

这里主要说一下如何在 CSS 中正确声明思源字体。上文提到,思源字体有多个版本,针对不同的操作系统和语言,其使用的名称也不同。因此在 CSS 代码中正确地声明思源字体需要考虑所有思源字体的版本。

思源黑体

font-family: 'Noto Sans CJK SC', 'Noto Sans CJK', 'Source Han Sans', source-han-sans-simplified-c, sans-serif;

这样声明可以让浏览器先调用系统内已安装的思源黑体,没有的话再从网络上加载。如果网络也加载失败,会回落到系统默认的非衬线字体。思源黑体的内置西文是 Adobe Source Sans Pro。

思源黑体 + Google Noto Sans

font-family: 'Noto', 'Noto Sans CJK SC', 'Noto Sans CJK', 'Source Han Sans', source-han-sans-simplified-c, sans-serif;

思源宋体

font-family: 'Noto Serif CJK SC', 'Noto Serif CJK', 'Source Han Serif SC', ‘Source Han Serif’, source-han-serif-sc, serif;

思源宋体内置的西文字体是 Adobe Source Serif。

思源宋体 + Google Noto Serif

font-family: 'Noto Serif', 'Noto Serif CJK SC', 'Noto Serif CJK', 'Source Han Serif SC', ‘Source Han Serif’, source-han-serif-sc, serif;

配合其他字体使用

紧接着 font-family 后面添加西文字体可以替换掉思源字体内置的西文字体;在结尾 serif 前面添加中文字体可以添加回落字体,但是一般情况下不必要。

我的用法

我在我的博客标题处使用思源宋体,字重高达 900。这种字重只有思源宋体能提供,其他任何宋体都不能实现如此丰富的字重。如果系统中已经安装思源宋体,优先使用本地字体。如果本地没有安装,则从 Typekit 下载。如果思源宋体下载失败,寻找系统内的宋体使用。

.entry-title {
    font-family: 'Noto Serif CJK SC', 'Source Han Serif SC', ‘Source Han Serif’, source-han-serif-sc, '宋体', serif;
    font-weight: 900;
}

在网站的正文中,我是用思源黑体作为最后的回落字体。当系统中已经安装苹方、思源黑体或者微软雅黑的时候,依次使用这三个字体,不会从 Typekit 下载动态的思源黑体。如果操作系统中很遗憾没有上述的字体(比如 Android、Ubuntu 等),再下载思源黑体。如果思源黑体下载失败,回落到系统默认的非衬线字体。

body {
    font-family: "PingFang SC", "Noto Sans CJK", "Source Han Sans", "Microsoft Yahei", source-han-sans-simplified-c, sans-serif;
}

这种用法兼顾了样式和加载速度。

2017-4-6 更新:修改关于常州华文和字符集的描述,感谢 Erif LIU 指正。更新 Windows 10 创作者更新可使用 Super OTC,感谢 NovaDNG 指正。