Ace编辑器等宽字体与光标间距有关

ped*_*ete 7 css fonts monospace twitter-bootstrap ace-editor

我已经看到了一些问题,光标在ace编辑器中间隔不正确.问题与字体间距有关,显然解决方案是只使用等宽字体.

这是关于这个问题的另一个问题. ace编辑器光标行为不正确

我的问题可能与使用Bootstrap主题有关,但我不完全确定.

当我打开chrome dev工具并查看ace编辑器中使用的字体时,它说我的Bootstrap模板正在使用字体

input, textarea, input[type="submit"]:focus, div {
  outline: 0 none;
  font-family: 'Open Sans', sans-serif;
}
Run Code Online (Sandbox Code Playgroud)

如果我加入我的CSS

.ace-editor {
  font-family: monospace !important;
}
Run Code Online (Sandbox Code Playgroud)

我仍然遇到光标间距错误的问题,奇怪的是,正在使用的字体看起来与Bootstrap中定义的"Open Sans"完全相同.

在Chrome开发工具中打开,说计算属性是'等宽的',所以应该有些东西可以工作,但事实并非如此.这是它变得非常奇怪的地方.

如果我删除字体项两个.ace-editorinput, textarea...,我得到一个非常好看的字体的作品.转到计算属性,将font-family再次显示为"Open Sans".

所以我试图回答的问题是,当我从Bootstrap中取消textarea条目时,我怎么能弄清楚哪些字体实际上正在被使用?或者为什么在指定时不接受等宽字体.

我有点认为'Open Sans'可能是等宽的,但无论如何,它仍然会引起巨大的麻烦.

a u*_*ser 9

该问题是由div引导规则中包含的引起的.它太宽泛,打破了ace的字符宽度测量.你可以加

.ace_editor div {
    font: inherit!important
}
Run Code Online (Sandbox Code Playgroud)

作为一种解决方法.最好还向引导程序模板的创建者报告问题.

  • 我的案例是`body*{font-family:...}`所以`.ace_editor*{font-family:...}`为我做的工作. (4认同)