Google Fonts 已支持思源宋体!

noto-serif-sc-added-on-google-fonts-1.png

正文

就在昨天,一次偶然,我打开了 Google Fonts 的网站,眼前一亮!

noto-serif-sc-added-on-google-fonts-2.png

惊奇地发现了被英文字母包围的汉字!什么?Google Fonts 居然支持汉字了!?

是的,查阅相关资料后,根据国外的这个网站上的两篇文章:

  1. New fonts added on Google Fonts — 18 November 2018
  2. New fonts added on Google Fonts — 07 December 2018

可知:Google Fonts 分别在 11 月 18 日和 12 月 07 日提供了思源黑体和思源宋体的简繁支持,而且高达 6 种字重支持,其中思源宋体更是高达 7 种字重。

这可了不得啊!更重要的是,它还支持了目前电子显示屏上稀缺的宋体,这将会是一个伟大的进步!要知道,对于中文书籍,宋体一直是正文印刷的标准字体,而不是目前电子显示屏上普遍的黑体,因为宋体的衬线更适合长时间的阅读。

为什么宋体的衬线更适合长时间的阅读?可以有个「主观解释」,即自己可直接体会的解释。实践起来也简单,阅读一天的宋体后回到黑体,阅读一天后再回到宋体。一对比,阅读时再次看到黑体,四字就会浮上心头——索然无味。

serif.png

sans.png

因此,作为长文章为主的博客,强烈建议马上使用 Google Fonts 提供的思源宋体!你可能注意到,我的博客已经开始使用了,所以应该如何使用呢?

google-fonts.png

当然,考虑到国内的网络对 Google 的域名并不友好,建议将googleapis.com修改为烧饼博客提供的镜像loli.net

最后,考虑到宋体的笔画要比黑体细,因此建议将字体的颜色修改为#000,以达到较好的阅读效果。

此外,虽然之前 Adobe Typekit 就已经提供了类似的服务,但比起 Google Fonts,应用起来略显麻烦。

福利

对于和我一样的 Hexo 的 NexT 主题使用者,按下列步骤操作。

1._config.yml

文件位置:~/blog/themes/next/_config.yml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
font:
- enable: false
+ enable: true

# Uri of fonts host. E.g. //fonts.googleapis.com (Default).
+ host: https://fonts.loli.net

# Font options:
# `external: true` will load this font family from `host` above.
# `family: Times New Roman`. Without any quotes.
# `size: xx`. Use `px` as unit.

# Global font settings used for all elements in <body>.
global:
external: true
+ family: Noto Serif SC
size:

2.base.styl

文件位置:~/blog/themes/next/source/css/_variables/base.styl
1
2
3
4
-$font-family-monospace    = consolas, Menlo, $font-family-chinese, monospace
+$font-family-monospace = consolas, Menlo, $font-family-base, monospace
-$font-family-monospace = get_font_family('codes'), consolas, Menlo, $font-family-chinese, monospace if get_font_family('codes')
+$font-family-monospace = get_font_family('codes'), consolas, Menlo, $font-family-base, monospace if get_font_family('codes')

3.custom.styl

文件位置:~/blog/themes/next/source/css/_custom/custom.styl
1
2
3
body {
color: #000;
}

此外,如果你也非常喜欢我的博客的英文字体,继续操作。

1.base.styl

文件位置:~/blog/themes/next/source/css/_variables/base.styl
1
2
3
4
5
6
7
// Font families.
-$font-family-chinese = "PingFang SC", "Microsoft YaHei"
+$font-family-chinese = "Linux Biolinum"

$font-family-base = $font-family-chinese, sans-serif
-$font-family-base = get_font_family('global'), $font-family-chinese, sans-serif if get_font_family('global')
+$font-family-base = $font-family-chinese, get_font_family('global'), sans-serif if get_font_family('global')

2.custom.styl

文件位置:~/blog/themes/next/source/css/_custom/custom.styl
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
@font-face {
font-family: 'Linux Biolinum';
src: url("/fonts/LinBiolinum_Rah.eot");
font-display: swap;
src: url("/fonts/LinBiolinum_Rah.eot") format('embedded-opentype'), url("/fonts/LinBiolinum_Rah.woff2") format('woff2'), url("/fonts/LinBiolinum_Rah.woff") format('woff'), url("/fonts/LinBiolinum_Rah.ttf") format('truetype');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'Linux Biolinum';
src: url("/fonts/LinBiolinum_RBah.eot");
font-display: swap;
src: url("/fonts/LinBiolinum_RBah.eot") format('embedded-opentype'), url("/fonts/LinBiolinum_RBah.woff2") format('woff2'), url("/fonts/LinBiolinum_RBah.woff") format('woff'), url("/fonts/LinBiolinum_RBah.ttf") format('truetype');
font-weight: bold;
font-style: normal;
}
@font-face {
font-family: 'Linux Biolinum';
src: url("/fonts/LinBiolinum_RIah.eot");
font-display: swap;
src: url("/fonts/LinBiolinum_RIah.eot") format('embedded-opentype'), url("/fonts/LinBiolinum_RIah.woff2") format('woff2'), url("/fonts/LinBiolinum_RIah.woff") format('woff'), url("/fonts/LinBiolinum_RIah.ttf") format('truetype');
font-weight: normal;
font-style: italic;
}

3. Linux_Biolinum.zip (3.6 MB)

下载后将解压的文件全部放到~/blog/source/fonts/下(若无fonts文件夹请自建)。

最后,部署,完成!laughing

链接

衬线体的进化:从纸面到屏幕 | 方正字库


updatedupdated2018-12-112018-12-11
本文结束啦感谢您阅读
0%