如何優雅地解決平臺字型適應問題

前言

對於一套好看舒適的前端設計方案，風格統一是基本要求，其中必然包括字型的統一。

由於國產化程式的不斷推進，冒出了不少基於 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 協議》，轉載必須註明作者和本文連結