共计 1139 个字符,预计需要花费 3 分钟才能阅读完成。
前言
对于一套难看舒服的前端设计方案,格调对立是根本要求,其中必然包含字体的对立。
因为国产化过程的一直推动,冒出了不少基于 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;
}
后果
刷新页面后,从新测试,发现脚本编辑器中的字体显示为等宽字体,且光标地位也显示失常,问题失去解决。
总结
以上的解决方案应该是最常见最广泛的字体问题解决方案,当前遇到相似的问题都能够参考这个解决。
~
~ 本文完,感激浏览!
~
学习乏味的常识,结识乏味的敌人,塑造乏味的灵魂!
大家好,我是〖编程三昧〗的作者 隐逸王 ,我的公众号是『编程三昧』,欢送关注,心愿大家多多指教!