解決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， 調研了半天，最後發現，其實解決方式很簡單嘛😜