标签：优雅 适应 Regular 字体 JetBrainsMono font ttf CSS
前言
对于一套好看舒适的前端设计方案，风格统一是基本要求，其中必然包括字体的统一。
由于国产化进程的不断推进，冒出了不少基于 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;
}
结果
刷新页面后，重新测试，发现脚本编辑器中的字体显示为等宽字体，且光标位置也显示正常，问题得到解决。
总结
以上的解决方案应该是最常见最普遍的字体问题解决方案，以后遇到类似的问题都可以参考这个解决。
-
~
- 本文完，感谢阅读！
~
学习有趣的知识，结识有趣的朋友，塑造有趣的灵魂！
标签：优雅,适应,Regular,字体,JetBrainsMono,font,ttf,CSS 来源： https://blog.csdn.net/qq_37718797/article/details/122737069
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。