原文鏈接：https://bestzuo.cn/posts/notoserifsc.html
網(wǎng)站字體
網(wǎng)站字體的設(shè)置可謂是一種設(shè)計(jì)美學(xué)，尤其是在博客網(wǎng)站中，因?yàn)椴┛途褪且环N視覺與文字的交互，字體設(shè)置的合理性、內(nèi)容的排版等都決定了讀者停留的時間。選擇合適的英文和中文字體，不僅可以讓讀者感受到舒適與美感，還可以讓博客整體風(fēng)格變得更加優(yōu)雅。
英文字體可選擇的種類較多，因?yàn)槿魏巫煮w都原生地支持英文。而中文則不然，由于中文字體的特殊性（當(dāng)然也包括了日文、韓文等）導(dǎo)致其體積十分龐大，因此在網(wǎng)站中使用非操作系統(tǒng)自帶的中文字體加載的速度往往很慢。所幸的是，在 2020 年的今天，如 Google Fonts 和 Adobe Typekit 等都提供了傻瓜式的第三方字體托管，同時 CDN 的普及也確保了不同地域的用戶都能夠（比較）迅速地加載非本地字體。更關(guān)鍵的是，今天即使是移動設(shè)備的帶寬也允許用戶在1–2秒內(nèi)完成一套中文字體的加載。我們已經(jīng)完全有理由拋棄自帶的微軟雅黑采用更靈活的中文字體方案！
襯線體與無襯線體
在談及思源宋體前，不妨先了解一下襯線字體和無襯線字體的概念。
襯線字體，意思是在字的筆畫開始、結(jié)束的地方有額外的裝飾，而且筆畫的粗細(xì)會有所不同。無襯線體則沒有這些額外的裝飾，而且筆畫的粗細(xì)差不多。（來源于百度百科）
不妨來看一下字體對比：
襯線字體可以讓讀者感受到沉浸式閱讀的美感，更適合長篇閱讀，比較傳統(tǒng)，如在紙張上閱讀般；無襯線字體則更加醒目，比較現(xiàn)代化。
思源宋體
思源宋體在 2017 年由 Adobe 發(fā)布，基于「開源字體授權(quán)發(fā)布」，并且在文檔中說明可以基于其源代碼進(jìn)行二次修改后使用（商用或者個人使用），因此我們使用思源宋體完全不用擔(dān)心版權(quán)問題，「思源」也因此得名。
但是如果你把“開源、免費(fèi)”當(dāng)作思源系列字體的全部意義，那就大錯特錯了。Google 和 Adobe 兩大商業(yè)巨頭，誰都不指著這套字體來賺錢。聯(lián)合開發(fā)思源系列字體的最大目的，是拋磚引玉，為「泛中日韓（Pan-CJK）」字體提供一個良好的榜樣。
思源宋體也是一個中宮偏大、重心下放的字體。這種設(shè)計(jì)更為現(xiàn)代，適合電子點(diǎn)陣屏幕。粗字重更接近「標(biāo)宋」（橫豎筆畫粗細(xì)對比強(qiáng)烈）的風(fēng)格，而細(xì)字重更接近「書宋」（橫豎筆畫粗細(xì)相似）的風(fēng)格。
相比其他的宋體，豐富的字重仍然是思源宋體最大的優(yōu)點(diǎn)。在粗字重上，思源黑體非常大氣優(yōu)雅；細(xì)字重上又不喪失易讀性。
思源宋體相比 Windows 內(nèi)置的中易宋體明顯中宮更大，這樣無論是屏幕顯示還是打印的效果都更厚重、更壯實(shí)。
在顯示大段文字的時候，這種厚重更明顯。
使用思源宋體
引入字體
2018 年在 Google Fonts 上已經(jīng)托管了思源宋體，所以我們可以直接通過托管引入到我們的博客中。打開 Google Fonts，搜索思源宋體的英文名：Noto Serif SC，在列表中選擇我們個人覺得合適的字體樣式，點(diǎn)擊右側(cè)的 Select this style，注意此處可根據(jù)自己需要選擇多個樣式。
點(diǎn)擊右側(cè)的 Embed，將給出的 link 樣式引入到我們的博客網(wǎng)站 head 中，然后在 body 整體樣式中設(shè)置 font-family: 'Noto Serif SC', serif; 就可以正常使用了。
注意事項(xiàng)
在上述引入完成后，博客內(nèi)就可以正常使用思源宋體了，但是我們?nèi)匀恍枰⒁庖恍┘?xì)節(jié)如下。
英文字體的聲明應(yīng)該在中文字體前面
<div class="note danger">記住這個事實(shí)：絕大部分中文字體里包含英文字母（但是基本上都很丑），而英文字體里不包含中文字符。</div>
因此在 font-family 中聲明字體時，一定要先設(shè)置英文字體，再設(shè)置中文字體，我們的設(shè)置應(yīng)該如下：
//注意字體順序
font-family: 'EB Garamond', 'Noto Serif SC';
其中 EB Garamond 是英文字體，因此在渲染中文的時候會下落到我們選擇的 Noto Serif SC，也就是思源宋體，這樣就可以實(shí)現(xiàn)中文和英文字體分離。
另外還有一個好習(xí)慣，就是在最后補(bǔ)充英文字體族的名稱。也就是襯線體和非襯線體。因此在正常情況下，你應(yīng)該這么做：
//末尾加上字體族
font-family: 'EB Garamond', 'Noto Serif SC', serif;
上述是正確的引用方式。
兼容操作系統(tǒng)
在考慮到所有用戶情況下，我們應(yīng)該盡量讓 MacOS、Ios、Linux 系統(tǒng)用戶使用系統(tǒng)自帶的字體，而 Windows 用戶則使用思源宋體。原因嘛當(dāng)然是因?yàn)?Windows 自帶的中文字體實(shí)在找不到好看的，而主動安裝字體的用戶畢竟還是少數(shù)。
所以，兼容后的寫法可以是這樣的：
//兼容寫法
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-system、Nimbus Roman No9 L 分別對應(yīng) Windows、macOS/iOS、Linux 下三種系統(tǒng)內(nèi)置英文字體（其實(shí) Georgia 就已經(jīng)覆蓋三種系統(tǒng)了，后面兩個只是出于保險(xiǎn)起見），PingFang SC（蘋方）、Hiragino Sans GB（冬青黑體）、Microsoft Yahei（微軟雅黑）對應(yīng)三種系統(tǒng)內(nèi)置中文字體（按照上文說法，Apple 系列在前，Windows 在最后），Josefin Sans 和 Noto Serif SC（思源宋體）則是兩套允許免費(fèi)使用的第三方字體。
