原文鏈接：https://bestzuo.cn/posts/notoserifsc.html
網(wǎng)站字體
網(wǎng)站字體的設(shè)置可謂是一種設(shè)計美學(xué)，尤其是在博客網(wǎng)站中除呵，因為博客就是一種視覺與文字的交互薪铜，字體設(shè)置的合理性漆弄、內(nèi)容的排版等都決定了讀者停留的時間脚草。選擇合適的英文和中文字體，不僅可以讓讀者感受到舒適與美感披坏，還可以讓博客整體風(fēng)格變得更加優(yōu)雅态坦。
英文字體可選擇的種類較多，因為任何字體都原生地支持英文棒拂。而中文則不然伞梯，由于中文字體的特殊性（當(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)問題，「思源」也因此得名荣倾。
但是如果你把“開源悯搔、免費”當(dāng)作思源系列字體的全部意義，那就大錯特錯了舌仍。Google 和 Adobe 兩大商業(yè)巨頭妒貌，誰都不指著這套字體來賺錢通危。聯(lián)合開發(fā)思源系列字體的最大目的，是拋磚引玉灌曙，為「泛中日韓（Pan-CJK）」字體提供一個良好的榜樣菊碟。
思源宋體也是一個中宮偏大、重心下放的字體在刺。這種設(shè)計更為現(xiàn)代逆害，適合電子點陣屏幕。粗字重更接近「標(biāo)宋」（橫豎筆畫粗細(xì)對比強(qiáng)烈）的風(fēng)格蚣驼，而細(xì)字重更接近「書宋」（橫豎筆畫粗細(xì)相似）的風(fēng)格魄幕。
相比其他的宋體，豐富的字重仍然是思源宋體最大的優(yōu)點隙姿。在粗字重上梅垄，思源黑體非常大氣優(yōu)雅；細(xì)字重上又不喪失易讀性输玷。
思源宋體相比 Windows 內(nèi)置的中易宋體明顯中宮更大队丝，這樣無論是屏幕顯示還是打印的效果都更厚重、更壯實欲鹏。
在顯示大段文字的時候机久，這種厚重更明顯。
使用思源宋體
引入字體
2018 年在 Google Fonts 上已經(jīng)托管了思源宋體赔嚎，所以我們可以直接通過托管引入到我們的博客中膘盖。打開 Google Fonts，搜索思源宋體的英文名：Noto Serif SC尤误，在列表中選擇我們個人覺得合適的字體樣式侠畔，點擊右側(cè)的 Select this style，注意此處可根據(jù)自己需要選擇多個樣式损晤。
點擊右側(cè)的 Embed软棺，將給出的 link 樣式引入到我們的博客網(wǎng)站 head 中，然后在 body 整體樣式中設(shè)置 font-family: 'Noto Serif SC', serif; 就可以正常使用了尤勋。
注意事項
在上述引入完成后喘落，博客內(nèi)就可以正常使用思源宋體了，但是我們?nèi)匀恍枰⒁庖恍┘?xì)節(jié)如下最冰。
英文字體的聲明應(yīng)該在中文字體前面
<div class="note danger">記住這個事實：絕大部分中文字體里包含英文字母（但是基本上都很丑）瘦棋，而英文字體里不包含中文字符。</div>
因此在 font-family 中聲明字體時暖哨，一定要先設(shè)置英文字體赌朋，再設(shè)置中文字體，我們的設(shè)置應(yīng)該如下：
//注意字體順序
font-family: 'EB Garamond', 'Noto Serif SC';
其中 EB Garamond 是英文字體，因此在渲染中文的時候會下落到我們選擇的 Noto Serif SC箕慧，也就是思源宋體服球，這樣就可以實現(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)然是因為 Windows 自帶的中文字體實在找不到好看的，而主動安裝字體的用戶畢竟還是少數(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)置英文字體（其實 Georgia 就已經(jīng)覆蓋三種系統(tǒng)了丈攒，后面兩個只是出于保險起見）哩罪，PingFang SC（蘋方）、Hiragino Sans GB（冬青黑體）巡验、Microsoft Yahei（微軟雅黑）對應(yīng)三種系統(tǒng)內(nèi)置中文字體（按照上文說法际插，Apple 系列在前，Windows 在最后）显设，Josefin Sans 和 Noto Serif SC（思源宋體）則是兩套允許免費使用的第三方字體框弛。
