How to gracefully solve the problem of platform font adaptation

Preface

For a nice and comfortable front-end design , Uniform style is the basic requirement , It must include the unification of fonts .

Due to the continuous advancement of localization process , There have been a lot of problems based on Linux The domestic operating system of , This leads to our usual windows Good fonts used on , On these home-made operating systems, it fails , The reason is that the corresponding fonts are not installed on these operating systems .

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

The phenomenon

When a customer runs our project on a domestic system , There is a cursor mismatch problem in the script editor .

analysis

We used in our project ace_editor Script editor , Through the roundness source code that , It calculates the cursor position , It depends on the font width , This requires that you must use the same width font , otherwise , The cursor will be misaligned due to the wrong calculation position .

The causes of the above phenomena , To put it bluntly, it is the operating system used by the customer , The fonts required by our project script editor are not installed .

CSS Font knowledge

be familiar with CSS I think all of you know that , We can go through CSS Import font file and define font name , such as ：

// font.css
/*  Define font name 、 Import constant width font file  */
@font-face {
    font-family: "bianchengsanmei";
    src: url("./font/bianchengsanmei.ttf");
}

/*  Using fonts  */
.div{
    font-family: "bianchengsanmei";
    font-size: 14px;
    font-weight: normal;
}

Solution

For the above problems , Our solution includes the following steps ：

First step ： Download the constant width font file on the Internet , What we choose here is JetBrainsMono typeface ;

The second step ： Select the appropriate font file , In this article, we choose JetBrainsMono-Regular.ttf ：

image-20220128160112785

The third step ： take JetBrainsMono-Regular.ttf Copy to ./css/font/ Under the path , And in CSS The introduction and use of ：

// ./css/font.css
/*  Define font name 、 Import constant width font file  */
@font-face {
    font-family: "JetBrainsMono-Regular";
    src: url("./font/JetBrainsMono-Regular.ttf");
}

/*  Using fonts  */
.div{
    font-family: "JetBrainsMono-Regular";
    font-size: 14px;
    font-weight: normal;
}

result

After refreshing the page , To test , Found that the font in the script editor is displayed as a constant width font , And the cursor position is displayed normally , Problem solved .

summary

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