Ace 编辑器等宽字体存在光标间距问题

Question

我在 ace 编辑器中发现了一些光标间距不正确的问题。问题与字体间距有关，显然解决方案是仅使用等宽字体。

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

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

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

input, textarea, input[type="submit"]:focus, div {
  outline: 0 none;
  font-family: 'Open Sans', sans-serif;
}

如果我添加到我的CSS

.ace-editor {
  font-family: monospace !important;
}

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

在 Chrome 开发工具中打开，显示计算属性为“等宽”，因此某些内容应该可以正常工作，但事实并非如此。这就是事情变得非常奇怪的地方。

如果我删除

.ace-editor

和

input, textarea...

的字体条目，我会得到一个非常漂亮的字体。 转到计算属性，显示字体系列再次为“Open Sans”。

所以我要回答的问题是，当我从 Bootstrap 取消文本区域条目时，如何找出实际使用的字体？或者为什么在指定时不接受等宽字体。

我有点假设“Open Sans”可能是等宽的，但无论如何，它仍然引起了巨大的头痛。

Answer 1

该问题是由引导规则中包含的

div

引起的。 它太宽了，破坏了 ace 的字符宽度测量。 您可以添加

.ace_editor div {
    font: inherit!important
}

作为解决方法。最好也向引导模板的创建者报告问题。

Answer 2

最直接的解决方法是将样式直接应用于文本行，至少对于我正在使用的 ace 1.9 来说是这样。

.ace_text {
    font-family: monospace;  
}