前言
對於一套好看舒適的前端設計方案，風格統一是基本要求，其中必然包括字型的統一。
由於國產化程式的不斷推進，冒出了不少基於 Linux 的國產作業系統，這就導致我們平時在 windows 上使用的好好的字型，在這些國產作業系統上就失效了，其原因是這些作業系統上沒有安裝對應的字型。
在這裡，我就記錄一下最近解決字型問題的一次過程。
現象
某客戶在某國產系統上執行我們的專案時，指令碼編輯器中出現了游標錯位的問題。
分析
我們的專案中用到了 ace_editor 指令碼編輯器，通過圓度原始碼得知，它在計算游標位置時，依靠的是字型寬度，這就要求必須使用等寬字型才行，否則，會因計算位置錯誤而引起游標錯位。
引起上述現象的原因，說白了就是客戶所使用的的作業系統中，沒有安裝我們專案指令碼編輯器所需要的字型。
CSS 字型知識
熟悉 CSS 的同學應該都知道，我們可以通過 CSS 引入字型檔案並定義字型名稱，比如：
// font.css
/* 定義字型名稱、引入等寬字型檔案 */
@font-face {
font-family: "bianchengsanmei";
src: url("./font/bianchengsanmei.ttf");
}
/* 使用字型 */
.div{
font-family: "bianchengsanmei";
font-size: 14px;
font-weight: normal;
}解決方案
針對上述問題，我們的解決方案包括以下步驟：
第一步：在網上下載等寬字型檔案，在這裡我們選擇的是 JetBrainsMono 字型；
第二步：挑選合適的字型檔案，本文中選擇的是 JetBrainsMono-Regular.ttf ：
第三步：將 JetBrainsMono-Regular.ttf 拷貝至 ./css/font/ 路徑下，並在 CSS 檔案中引入和使用：
// ./css/font.css
/* 定義字型名稱、引入等寬字型檔案 */
@font-face {
font-family: "JetBrainsMono-Regular";
src: url("./font/JetBrainsMono-Regular.ttf");
}
/* 使用字型 */
.div{
font-family: "JetBrainsMono-Regular";
font-size: 14px;
font-weight: normal;
}結果
重新整理頁面後，重新測試，發現指令碼編輯器中的字型顯示為等寬字型，且游標位置也顯示正常，問題得到解決。
總結
以上的解決方案應該是最常見最普遍的字型問題解決方案，以後遇到類似的問題都可以參考這個解決。
~
~ 本文完，感謝閱讀！
~
學習有趣的知識，結識有趣的朋友，塑造有趣的靈魂！
本作品採用《CC 協議》，轉載必須註明作者和本文連結