How to gracefully solve the platform font adaptation problem

foreword

For a good-looking and comfortable front-end design scheme, the unity of style is the basic requirement, which must include the unity of fonts.

Due to the continuous advancement of the localization process, many domestic operating systems based on Linux have emerged, which has led to the fact that fonts that we usually use well on windows are invalid on these domestic operating systems. The reason is that these operating systems The corresponding fonts are not installed.

Here, I will record a recent process to solve the font problem.

Phenomenon

When a customer runs our project on a domestic system, the cursor dislocation problem occurs in the script editor.

analyze

The ace_editor script editor is used in our project. By reading the source code, we know that it relies on the font width when calculating the cursor position, which requires the use of a monospaced font. Otherwise, it will be caused by the wrong calculation position. The cursor is misplaced.

The reason for the above phenomenon, to put it bluntly, is that the fonts required by our project script editor are not installed in the operating system used by the customer.

CSS font knowledge

Students who are familiar with CSS should know that we can import font files and define font names through CSS, such as:

// font.css
/* 定义字体名称、引入等宽字体文件 */
@font-face {
    font-family: "bianchengsanmei";
    src: url("./font/bianchengsanmei.ttf");
}

/* 使用字体 */
.div{
    font-family: "bianchengsanmei";
    font-size: 14px;
    font-weight: normal;
}

solution

For the above problem, our solution includes the following steps:

first step : Download the monospaced font file online, here we choose the JetBrainsMono font;

Step 2 : Select the appropriate font file, in this article, JetBrainsMono-Regular.ttf is selected:

third step : Copy JetBrainsMono-Regular.ttf to the ./css/font/ , and import and use it in the CSS file:

// ./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;
}

result

After refreshing the page and retesting, it is found that the font in the script editor is displayed as a monospaced font, and the cursor position is also displayed normally, and the problem is solved.

Summarize

The above solutions should be the most common and common solutions to font problems. You can refer to this solution for similar problems in the future.

~

~ This article is over, thanks for reading!

~

Learn interesting knowledge, meet interesting friends, and shape interesting souls!

Hello everyone, I is [ programming Samadhi 〗 author hermit king , my public number is " programming Samadhi " welcome attention, we hope the exhibitions!