博客网站字体设置:思源宋体

原文链接:https://bestzuo.cn/posts/notoserifsc.html

网站字体

网站字体的设置可谓是一种设计美学,尤其是在博客网站中,因为博客就是一种视觉与文字的交互,字体设置的合理性、内容的排版等都决定了读者停留的时间。选择合适的英文和中文字体,不仅可以让读者感受到舒适与美感,还可以让博客整体风格变得更加优雅。

英文字体可选择的种类较多,因为任何字体都原生地支持英文。而中文则不然,由于中文字体的特殊性(当然也包括了日文、韩文等)导致其体积十分庞大,因此在网站中使用非操作系统自带的中文字体加载的速度往往很慢。所幸的是,在 2020 年的今天,如 Google Fonts 和 Adobe Typekit 等都提供了傻瓜式的第三方字体托管,同时 CDN 的普及也确保了不同地域的用户都能够(比较)迅速地加载非本地字体。更关键的是,今天即使是移动设备的带宽也允许用户在1–2秒内完成一套中文字体的加载。我们已经完全有理由抛弃自带的微软雅黑采用更灵活的中文字体方案!

衬线体与无衬线体

在谈及思源宋体前,不妨先了解一下衬线字体和无衬线字体的概念。

衬线字体,意思是在字的笔画开始、结束的地方有额外的装饰,而且笔画的粗细会有所不同。无衬线体则没有这些额外的装饰,而且笔画的粗细差不多。(来源于百度百科)

不妨来看一下字体对比:

image

衬线字体可以让读者感受到沉浸式阅读的美感,更适合长篇阅读,比较传统,如在纸张上阅读般;无衬线字体则更加醒目,比较现代化。

思源宋体

思源宋体在 2017 年由 Adobe 发布,基于「开源字体授权发布」,并且在文档中说明可以基于其源代码进行二次修改后使用(商用或者个人使用),因此我们使用思源宋体完全不用担心版权问题,「思源」也因此得名。

但是如果你把“开源、免费”当作思源系列字体的全部意义,那就大错特错了。Google 和 Adobe 两大商业巨头,谁都不指着这套字体来赚钱。联合开发思源系列字体的最大目的,是抛砖引玉,为「泛中日韩(Pan-CJK)」字体提供一个良好的榜样。

image

思源宋体也是一个中宫偏大、重心下放的字体。这种设计更为现代,适合电子点阵屏幕。粗字重更接近「标宋」(横竖笔画粗细对比强烈)的风格,而细字重更接近「书宋」(横竖笔画粗细相似)的风格。

相比其他的宋体,丰富的字重仍然是思源宋体最大的优点。在粗字重上,思源黑体非常大气优雅;细字重上又不丧失易读性。

思源宋体相比 Windows 内置的中易宋体明显中宫更大,这样无论是屏幕显示还是打印的效果都更厚重、更壮实。

在显示大段文字的时候,这种厚重更明显。

image

image

使用思源宋体

引入字体

2018 年在 Google Fonts 上已经托管了思源宋体,所以我们可以直接通过托管引入到我们的博客中。打开 Google Fonts,搜索思源宋体的英文名:Noto Serif SC,在列表中选择我们个人觉得合适的字体样式,点击右侧的 Select this style,注意此处可根据自己需要选择多个样式。

image

点击右侧的 Embed,将给出的 link 样式引入到我们的博客网站 head 中,然后在 body 整体样式中设置 font-family: 'Noto Serif SC', serif; 就可以正常使用了。

注意事项

在上述引入完成后,博客内就可以正常使用思源宋体了,但是我们仍然需要注意一些细节如下。

英文字体的声明应该在中文字体前面

<div class="note danger">记住这个事实:绝大部分中文字体里包含英文字母(但是基本上都很丑),而英文字体里不包含中文字符。</div>

因此在 font-family 中声明字体时,一定要先设置英文字体,再设置中文字体,我们的设置应该如下:

//注意字体顺序
font-family: 'EB Garamond', 'Noto Serif SC';

其中 EB Garamond 是英文字体,因此在渲染中文的时候会下落到我们选择的 Noto Serif SC,也就是思源宋体,这样就可以实现中文和英文字体分离。

另外还有一个好习惯,就是在最后补充英文字体族的名称。也就是衬线体和非衬线体。因此在正常情况下,你应该这么做:

//末尾加上字体族

font-family: 'EB Garamond', 'Noto Serif SC', serif;

上述是正确的引用方式。

兼容操作系统

在考虑到所有用户情况下,我们应该尽量让 MacOS、Ios、Linux 系统用户使用系统自带的字体,而 Windows 用户则使用思源宋体。原因嘛当然是因为 Windows 自带的中文字体实在找不到好看的,而主动安装字体的用户毕竟还是少数。

所以,兼容后的写法可以是这样的:

//兼容写法

font-family: Georgia, -apple-system, 'Nimbus Roman No9 L', 'PingFang SC', 'Hiragino Sans GB', 'Noto Serif SC', 'Microsoft Yahei', 'WenQuanYi Micro Hei', 'ST Heiti', sans-serif;

其中 Georgia-apple-systemNimbus Roman No9 L 分别对应 Windows、macOS/iOS、Linux 下三种系统内置英文字体(其实 Georgia 就已经覆盖三种系统了,后面两个只是出于保险起见),PingFang SC(苹方)、Hiragino Sans GB(冬青黑体)、Microsoft Yahei(微软雅黑)对应三种系统内置中文字体(按照上文说法,Apple 系列在前,Windows 在最后),Josefin SansNoto Serif SC(思源宋体)则是两套允许免费使用的第三方字体。

参考文章

  1. Web 中文字体应用指南
  2. 思源系列字体:技术价值高于艺术价值
  3. 中文网页字体设置方案:从 font-family 到 font-display
  4. Google Fonts 已支持思源宋体!
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 151,511评论 1 330
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 64,495评论 1 273
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 101,595评论 0 225
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 42,558评论 0 190
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 50,715评论 3 270
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 39,672评论 1 192
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,112评论 2 291
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 29,837评论 0 181
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 33,417评论 0 228
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 29,928评论 2 232
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,316评论 1 242
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 27,773评论 2 234
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,253评论 3 220
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 25,827评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,440评论 0 180
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 34,523评论 2 249
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 34,583评论 2 249