Adding system-ui to the font stack

We might want to consider adding system-ui to our font stack in the future. See browser support.

However, there are still some issues that need to be resolved, like w3c/csswg-drafts#3658

Note that the latest CSS spec added this sentence:

As the name implies, system-ui is intended for use with UI elements in web application, and not for large paragraphs of text or articles.

TL;DR:

Windows:
- Windows XP use SimSun for Simplified Chinese on and PMingLiU for Traditional Chinese which makes Latin text hard to read;
- Windows 10+ Japanese use Yu Gothic UI which is condensed and hard to read;
- browser UA on Windows could not respect lang attribute and change locale orthography when using system-ui, and only limited to use the UI font for the current Windows locale language;
- could not change Windows UI font, so trying to change system-ui will require registry edit like noMeiryoUI.
Mac OS/iOS: fully support locale changing in system-ui as a virtual composite font. No UI font customisation for MacOS.
Android:
- doesn't support on OS level but uses Noto CJK which has OpenType locl feature that support lang attribute;
- some OS allow changing Android UI font, which will break lang attribute support.

Navigation Menu