背景
最近发现的一个字体显示问题，那就是中文在英文系统上显示为乱码方块。我的系统环境：Ubuntu + Firefox（这应该是外国人的典型环境，他们并不会安装中文语言包）。而且我发现很多国内大厂的网络网站也是如此，他们并没有进行兼容性处理。
复现方法：安装一个操作系统，但不要安装中文语言，然后访问你的网站，看能否正常显示。或者查看这样的截图。
这样会带来很不好的体验，如果我是外国人，看到这种小方块，我会直接关掉浏览器。
随后我又试了试其他语言，比如俄语，是可以正常显示的，可能是因为俄语字母比较有限，容易嵌入字体中。
随后，我研究了一下字体文件。中文字体都很大，一般是几MB到10MB。英文字体都很小一般就几十KB。
引入字体的方法
第一种方法可以使用Google Fonts，第二种可以将字体部署到本地。
Google Fonts默认已经将字体做了切分。自己部署的话需要自己切分字体文件，这里有一个切分工具。
开始的解决办法（不按预期工作）
解决的总体思路是，在中文系统上使用Arial字体，中文也会默认正常显示。在其他非中国系统上使用Google Fonts。
在CSS代码中，添加这样一段，以为可以正常工作，但是不行。结果是它会在任何时候都会请求字体文件，这样在中文系统上会有卡顿和闪烁。具体原因不清楚。
font-family: Arial, system-ui, 'Noto Sans SC', 'Noto Color Emoji';
所以放弃了。
目前的办法
使用JS判断浏览器语言，中文系统默认不动，在非中文系统上使用Google Fonts字体。
global.js
// set simplified Chinese font on non-Chinese systems
var userLanguage = navigator.language || navigator.userLanguage;
if ((userLanguage !== 'zh-CN') && (userLanguage !== 'zh')) {
// set font
// font-family: Arial, system-ui, 'Noto Sans SC', 'Noto Color Emoji';
body.style.fontFamily = "Arial, system-ui, 'Noto Sans SC', 'Noto Color Emoji'";
}
global.css
@import url('https://fonts.googleapis.com/css2?family=Noto+Color+Emoji&family=Noto+Sans+SC&display=swap');
body {
font-family: Arial;
}