banner
「云华」CloudSino

网络一隅/Net`Corner

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

Record a xLog website font change: Source Han Serif font

Why?#

Because it gives people a feeling of printed materials, thick and serious. Personally, I don't like using handwriting fonts like KaiTi on electronic devices. Most websites on this site and xLog generally default to the browser's default font, such as Microsoft YaHei on Windows and PingFang on Mac. Not to say that they don't look good, but there is a reason why Sans Serif fonts become the default fonts for most electronic devices and public facilities - they are easy to read at a glance. But from an aesthetic point of view, I treat blog articles as publications or books. So, in this case, SongTi font is more suitable. On the other hand, it also unifies the reading experience on different devices.

Noto Serif SC - It is readable, free, open source, and can be used for commercial purposes. It covers a wide range of Chinese characters and is a good choice if you don't want to spend too much time choosing fonts.

If it doesn't work on your device, please press Ctrl+F5 to refresh the browser cache. The first loading may be a bit slow, please understand, thank you.

How to change#

Here is the code:

@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;
};

This site is currently hosted on xLog, which supports custom CSS.

Here, we use the Google Fonts service to load web fonts (due to platform limitations).

But Google, everyone understands, so we use the Google Fonts mirror of Shanghai Jiao Tong University to ensure normal use in mainland China.

Noto Serif supports multiple languages, and xLog also supports Simplified Chinese, Traditional Chinese, Japanese, and English. Although most visitors to this site are probably Simplified Chinese users, in order to achieve perfect display effects, I have introduced these four fonts.

TC or HK#

Let me share some knowledge: there are some subtle differences between Traditional Chinese used in Taiwan and Traditional Chinese used in Hong Kong. For example, "爲"-"為" | "裏"-"裡", and there are even more small differences in character shapes.

Noto Serif uses the suffixes Noto Serif TC (Traditional Chinese, which actually uses the more widely used Taiwanese character shapes) and Noto Serif HK (Hong Kong character shapes) to distinguish between the two.

The Traditional Chinese font used on this site uses the Taiwanese standard character shapes. This is because in the language switch (bottom right corner) provided by xLog, the website identifier for Traditional Chinese is lang="zh-TW", not zh-HK or zh-hant.

(Microsoft Pinyin seems to default to Hong Kong Traditional Chinese. This article is typed using it.)

Come back, my HanaMincho#

To be honest, I initially wanted to use the Japanese font HanaMincho (Serif). This is an open-source font developed by GlyphWiki. It includes almost all the Chinese characters and characters in the current CJK (Chinese, Japanese, Korean Unified Ideographs) character library, including Hiragana and Latin letters, and has good support for Simplified and Traditional Chinese.

However, as you can guess, there is a but here. The HanaMincho font from Google Fonts only includes commonly used Japanese Kanji. If we directly load the original font file of several tens of megabytes, it would be too heavy.

This page has a preview of the font, you can experience the exotic style of Japanese Kanji (bushi).

Font Preview (Simplified Chinese)#

你站在桥上看风景,
看风景人在楼上看你。
明月装饰了你的窗子,
你装饰了别人的梦。

Font Preview (Japanese)#

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

Loading...
Ownership of this post data is guaranteed by blockchain and smart contracts to the creator alone.