如何优雅地解决平台字体适应问题
前言
对于一套好看舒适的前端设计方案,风格统一是基本要求,其中必然包括字体的统一。
由于国产化进程的不断推进,冒出了不少基于 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;
}
结果
刷新页面后,重新测试,发现脚本编辑器中的字体显示为等宽字体,且光标位置也显示正常,问题得到解决。
总结
以上的解决方案应该是最常见最普遍的字体问题解决方案,以后遇到类似的问题都可以参考这个解决。
- ~
- 本文完,感谢阅读!
~
学习有趣的知识,结识有趣的朋友,塑造有趣的灵魂!