如何优雅地解决平台字体适应问题

前言

对于一套好看舒适的前端设计方案，风格统一是基本要求，其中必然包括字体的统一。

由于国产化进程的不断推进，冒出了不少基于 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;
}

结果

刷新页面后，重新测试，发现脚本编辑器中的字体显示为等宽字体，且光标位置也显示正常，问题得到解决。

总结

以上的解决方案应该是最常见最普遍的字体问题解决方案，以后遇到类似的问题都可以参考这个解决。