Modern CSS Font Stack for Chinese Websites
My blog uses a custom theme based on Bootstrap 4, which utilizes the native font stack approach to benefit from system fonts. An in-depth comparison & introduction was created by Ire Aderinokun.
It works well in most circumstances, even for Simplified Chinese websites (fallback to beautiful Microsoft YaHei
font).
Except in Windows 10 English, the Simplified Chinese text fallback to a really basic Serif font
possibly named SimSun
(宋体, Song Ti), which was bundled at least since Windows XP.
Solution: using Bootstrap 4 font stack as the base, extending with Windows language-specific system fonts.
In case of Simplified Chinese, Microsoft YaHei
(微软雅黑) is used, it's the system font since Windows Vista Chinese Simplified.
body {
font-family: -apple-system,
BlinkMacSystemFont,
"Segoe UI",
Roboto,
"Helvetica Neue",
Arial,
"Microsoft YaHei", sans-serif,
"Apple Color Emoji",
"Segoe UI Emoji",
"Segoe UI Symbol";
}
FONT REQUIRED
Chinese Language Pack might be required to properly display Microsoft YaHei
font in Windows 10 English, installable via Windows Settings. The user SHOULD have this knowledge already since reading Chinese in an English OS considered advanced use case (or edge case).