前言一个好看又舒服的前端设计方案，统一的风格是基本要求，其中必须包括统一的字体。由于国产化进程的不断推进，出现了很多基于Linux的国产操作系统。这就造成了我们平时在windows上用的很好的字体，在这些国产操作系统上就失效了。原因是这些操作系统上没有安装相应的字体。在此记录一下最近解决字体问题的过程。现象客户在国产系统上运行我们的项目时，光标在脚本编辑器中错位了。分析一下我们项目中使用的ace_editor脚本编辑器。通过阅读源码我们知道，它在计算光标位置时，依赖于字体宽度，这就需要使用等宽字体。否则，计算位置将是错误的。导致光标错位。出现上述现象的原因，说白了就是客户使用的操作系统中没有安装我们项目脚本编辑器需要的字体。CSS字体知识熟悉CSS的同学应该都知道，我们可以通过CSS导入字体文件，定义字体名称，例如：//font。family:"边城三美";src:url("./font/bianchengsanmei.ttf");}/*使用字体*/.div{font-family:"bianchengsanmei";字体大小：14px；font-weight:normal;}解决方案针对以上问题，我们的解决方案包括以下步骤：第一步：从网上下载等宽字体文件，这里我们选择JetBrainsMono字体；Step2：选择合适的字体文件，选择一个是JetBrainsMono-Regular.ttf：Step3：将JetBrainsMono-Regular.ttf复制到./css/font/路径下，在CSS文件中导入使用：//./css/font.css/*定义字体名称，导入等宽字体文件*/@font-face{font-family:"JetBrainsMono-Regular";src:url("./font/JetBrainsMono-Regular.ttf");}/*使用字体*/.div{字体系列：“JetBrainsMono-Regular”；字体大小：14px；font-weight:normal;}刷新页面重新测试，发现脚本编辑器中的字体显示为等宽字体，光标位置也显示正常，问题解决。综上所述，以上解决方案应该是字体问题最常见、最常见的解决方案。以后遇到类似问题可以参考此解决方案。关键词：前端训练
