解决Ubuntu下Chrome中文字体混乱问题

背景：公司产品的终端系统为 Ubuntu，用户操做都在 Chrome 浏览器上完成。可是界面上的一些中文字体出现了黑体和楷体混杂的状况，很是不美观。

目标：统一界面显示字体。

经过 research，目前网上的主要方案有：1.删楷体+改系统字体 2.设置里改字体。 3.启动器的命令里加上”-disable-tabbed-options”，在任意输入框右键拼写检查选项。这三种方式。

验证了前两种方案，确实有效，但由于已有产品售出，因此放弃这些方案。

而第三种方式过于生硬，且一样不符合需求，未实践验证。

1. 为 Ubuntu 安装新字体

网页没有指定字体时，浏览器将调用系统默认字体配置。

1. 安装文泉驿字体：

   sudo apt-get install ttf-wqy*
   复制代码

2. 编辑字体设置

   sudo gedit /etc/fonts/conf.avail/69-language-selector-zh-cn.conf
   复制代码

而后在该文件里能够设置字体的优先级，最后重启电脑使配置生效。

在linux中安装/卸载字体

2. 设置浏览器字体

Linux 下的 chromium（chrome）默认字体并不继承系统字体。

没法在浏览器配置项里选择通用字体，因此选择直接更改配置项的源文件~/.config/chromium/Default/Preferences

（这个是chromium的目录，chrome理论上把chromium改成chrome便可）

1. 关闭全部正在运行的chromium（chrome），vim 打开配置文件并编辑。

shift+g转到文件末尾处 ：

"webkit": { "webprefs": { "global": { "fixed_font_family": "monospace", "sansserif_font_family": "scans", "serif_font_family": "scans-serif", "standard_font_family": "scans" }, "uses_universal_detector": true } } 
复制代码

根据须要从新设置字体集及优先级。

3. 在项目中设置自定义字体集

其实，最普适的方案就是用font-face引入自定义字体。将使用的字体文件传到服务器上，用font-face加载到网页中。

真正了解CSS3背景下的@font face规则

而更简单一点是使用现有字体，但要考虑font-family的字体应用顺序，尽可能不要出现字体未匹配，降级后显示效果特别差的状况。

如何保证网页的字体在各平台都尽可能显示为最高质量的黑体？

Fonts.css -- 跨平台中文字体解决方案

最终采用的方案：

• 最开始使用了上面的fonts.css库，但后来发现其实项目中最后引用的fonts.css/dist/fonts.css里其实就是几个指定了字体集的class。

.font-hei {
    font-family: -apple-system, "Noto Sans", "Helvetica Neue", Helvetica, "Nimbus Sans L", Arial, "Liberation Sans", "PingFang SC", "Hiragino Sans GB", "Noto Sans CJK SC", "Source Han Sans SC", "Source Han Sans CN", "Microsoft YaHei", "Wenquanyi Micro Hei", "WenQuanYi Zen Hei", "ST Heiti", SimHei, "WenQuanYi Zen Hei Sharp", sans-serif;
}
.font-kai {
    font-family: Baskerville, Georgia, "Liberation Serif", "Kaiti SC", STKaiti, "AR PL UKai CN", "AR PL UKai HK", "AR PL UKai TW", "AR PL UKai TW MBE", "AR PL KaitiM GB", KaiTi, KaiTi_GB2312, DFKai-SB, "TW\-Kai", serif;
}
.font-song {
    font-family: Georgia, "Nimbus Roman No9 L", "Songti SC", "Noto Serif CJK SC", "Source Han Serif SC", "Source Han Serif CN", STSong, "AR PL New Sung", "AR PL SungtiL GB", NSimSun, SimSun, "TW\-Sung", "WenQuanYi Bitmap Song", "AR PL UMing CN", "AR PL UMing HK", "AR PL UMing TW", "AR PL UMing TW MBE", PMingLiU, MingLiU, serif;
}
.font-fang-song {
    font-family: Baskerville, "Times New Roman", "Liberation Serif", STFangsong, FangSong, FangSong_GB2312, "CWTEX\-F", serif;
}
复制代码

• 对上面的几种font-family进行验证，效果最好的是.font-hei。
• 因此最终，是在项目的全局 css 样式中加入了该字体集。

*{
    font-family: -apple-system, "Noto Sans", "Helvetica Neue", Helvetica, "Nimbus Sans L", Arial, "Liberation Sans", "PingFang SC", "Hiragino Sans GB", "Noto Sans CJK SC", "Source Han Sans SC", "Source Han Sans CN", "Microsoft YaHei", "Wenquanyi Micro Hei", "WenQuanYi Zen Hei", "ST Heiti", SimHei, "WenQuanYi Zen Hei Sharp", sans-serif;
}
复制代码

hai， 调研了半天，最后发现，其实解决方式很简单嘛😜