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

程式設計三昧發表於2022-01-28

字型.001

前言

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

由於國產化程式的不斷推進,冒出了不少基於 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

image-20220128160112785

第三步:將 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 協議》,轉載必須註明作者和本文連結

相關文章