Web 中使用思源宋体

Web 中使用思源宋体

用字体传达文字的情感

相比黑体,尤其是微软雅黑,我更喜欢在中文网页中使用宋体,文字易读性更好。但 Windows 中的宋体在字体较小的时候极不讨好,这时候宁愿用黑体了。

近期,Adobe 和 Google 联合发布了思源宋体,给了我一个惊喜,终于有个可以放心使用的开源宋体了,而且字体设计得挺和我心意。

由于思源字体由 Google 和 Adobe 联合开发并发行,虽说中文名称「思源宋体」相同,但是并没有统一的英文名称。Google 将思源字体归入旗下 Noto 字体家族,因此思源黑体的名字为 Noto Sans CJK,思源宋体的名字为 Noto Serif CJK;Adobe 将思源字体归入旗下 Source 字体家族,因此思源黑体的名字为 Source Han Sans,思源宋体的名字为 Source Han Serif。所以本地使用字体的时候取你所好的名字下载吧,我更倾向于 Adobe:https://github.com/adobe-fonts/source-han-serif/tree/release/

目前,Google Fonts 还未托管思源宋体,要在网页中使用该字体,可以使用 Adobe Typekit。在这里预览思源黑体和各字重,点击上方的 “WEB USE: ADD TO KIT”,根据提示进行设置。

Adobe Typekit

你也可以在 Adobe Typekit 中选择一个喜欢的西文字体配合思源宋体,比如说我这里暂且试用了 Crimson 加思源宋体的搭配。由于中文字体文件体积较大,我选择动态加载所需的中文字体。

Adobe Typekit Setting

然后获取顶部的 “Embed Code”,加入到 HTML 的 <head> 部分。另外,在 CSS 中,根据上图中 “using fonts in css” 中的提示,思源宋体(简体)的名字为 “source-han-serif-sc”。

当然也可以为 Google 的 Noto 字体兼容设置一下:

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

有可能大家下载的字体集不同,我把 ‘Source Han Serif SC’, ‘Source Han Serif CN’ 这两个都加进去了。如果访客本地两种字体都没有安装,那就使用 Typekit 提供的 ‘source-han-serif-sc’ 了。

这下我把字体全部切换到 Adobe Typekit 了,也不知道在国内的加载速度如何,希望不会比 Google Fonts 差。就算速度不及,我也愿意在我博客中用这样合意的宋体字体。

更新:突然发现 Google Fonts 新增加了 Noto Serif TCNoto Serif SC,也好,多一个选择了,有需要的同学也可以使用 https://css.loli.net/ 的反代:

<link href="https://fonts.loli.net/css?family=Noto+Serif+SC&display=swap" rel="stylesheet">

以上。

林宏

Frank Lin

Hey, there! This is Frank Lin (@flinhong), one of the 1.4 billion 🇨🇳. This 'inDev. Journal' site holds the exploration of my quirky thoughts and random adventures through life. Hope you enjoy reading and perusing my posts.

YOU MAY ALSO LIKE

中文网页字体设置

Web Notes

2018.03.01

中文网页字体设置

由于中文字体通常体积较大,在 web 中使用中文字体确实需要一些技巧。我也一直在纠结使用什么样的字体能有更好的阅读体验,鼓捣过 Typekit 加载思源宋体,可难免会拖慢加载速度,有时还不能成功加载,只能换回系统内置字体。今天就好好研究下网页字体的使用,一劳永逸!

TRENDING