banner
「云华」CloudSino

网络一隅/Net`Corner

愿我的祝福与你同在!
bilibili
steam
github
zhihu
misskey
email

記錄一次xLog網站字體更換:思源宋體

為什麼?#

因為就好這口襯綫字體,能給予人一種印刷物的感覺,厚重而嚴肅
個人不太喜歡在電子設備上使用一些偏手寫的字體如楷體等
本站和 xLog 上的大部分網站一般默認是瀏覽器的默認黑體,如 WIN 的雅黑和 MAC 的蘋方
不是說不好看,黑體能成為大部分電子設備和公共設施的默認字體是有原因的 —— 一目了然
但是從美學角度來看,我是把博客文章類比當作出版物書籍一類看待的
這麼說宋體自然更適合了,另一方面也算是統一了不同設備的閱讀體驗

思源宋體- 耐看且免費開源可商用,覆蓋的漢字絕對能排到前列,懶得挑了就直接用這個吧 (

如果在您的設備上沒有效果的話請Ctrl+F5以刷新瀏覽器緩存。第一次加載可能會有些慢,請理解一下謝謝。

怎麼換#

先上代碼:

@import url('https://google-fonts.mirrors.sjtug.sjtu.edu.cn/css2?family=Noto+Serif+SC:wght@200..900&display=swap');
@import url('https://google-fonts.mirrors.sjtug.sjtu.edu.cn/css2?family=Noto+Serif+TC:wght@200..900&display=swap');
@import url('https://google-fonts.mirrors.sjtug.sjtu.edu.cn/css2?family=Noto+Serif+JP:wght@200..900&display=swap');
@import url('https://google-fonts.mirrors.sjtug.sjtu.edu.cn/css2?family=Noto+Serif:ital,wght@0,100..900;1,100..900&display=swap');
body{
font-family: "Noto Serif SC", "Noto Serif TC", "Noto Serif JP", "Noto Serif", serif;
font-optical-sizing: auto;
font-weight: auto;
font-style: normal;
};

本站目前托管在了xLog,此平臺支持自定義 CSS

這裡使用了Google Fonts服務來加載網絡字體 (出於平臺限制)

但是谷歌嘛,大家都是明白的,因而借助上海交通大學的 Google Fonts 鏡像來實現大陸地區的正常使用。

思源襯綫體支持多種文字,同樣,xLog 也支持簡繁中文和日語英語,雖然本站的訪客應該多是簡體中文使用者,但為了顯示效果完美,我同時引入了這四種字體。

TC 還是 HK#

講一個熱知識:臺網的繁體和香港的繁體是有一些細微的區別的
如「為」-「為」|「裏」- 「裡」等,細小的字形差別就更多了

思源宋體使用 Noto Serif TC (繁體中文,實際上就是使用人數較多的台灣字形) 和 Noto Serif HK (香港字形) 的後綴來區分兩者

本站的繁中字體使用台灣標準字形,這是因為在 xLog 自帶的語言切換 (右下角) 中,繁體中文的網站標識是lang="zh-TW",而非zh-HKzh-hant

(微軟拼音好像默認是香港繁體,本文就是用它輸入的)

回來吧我的花園明朝#

實不相瞞我一開始是想用日本的花園明朝(宋體),這是一款由字形維基開發的開源字體。收入了目前 CJK (中日韓統一表意文字) 字庫中幾乎所有的漢字與字符,包括平片假名和拉丁字母,對簡繁中文的支持很好。

但是,也能猜到這裡會有但是,谷歌字體的花園明朝僅收入了常用日語漢字。而要是直接加載幾十兆的原字體文件的話,那可就太重了

此頁面有該字體預覽,可以去體驗一下日語漢字的異域風情 (bushi

附件:字體預覽#

(簡體中文)
你站在橋上看風景,
看風景人在樓上看你。
明月裝飾了你的窗子,
你裝飾了別人的夢。

(日語)
色は匂へど 散りぬるを
我が世誰ぞ 常ならむ
有為の奥山 今日越えて
浅き夢見じ 酔ひもせず

載入中......
此文章數據所有權由區塊鏈加密技術和智能合約保障僅歸創作者所有。