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

I've seen a few issues with the cursor being improperly spaced in the ace editor. The problem has to do with the font-spacing and apparently the solution is to only use monospaced fonts.

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

Here's another SO question about the issue. ace editor cursor behaves incorrectly

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

My problem may have something to do with using a Bootstrap theme, but I'm not entirely sure.

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

When I open chrome dev tools and look at the font used in the ace editor, it says that my Bootstrap template is using the fonts

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

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

If I add to my css

如果我加入我的CSS

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

I still have a problem with the cursor spacing being wrong, and strangely, the font which is being used looks exactly the same as the 'Open Sans' defined in Bootstrap.

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

Opening in Chrome dev tools, says that the computed property is 'monospace', so something is supposed to be working, but it isn't. Here is where it get really weird.

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

If I remove the font entries for both .ace-editor and input, textarea..., I get a perfectly good looking font that works. Going to the computed properties, is shows the font-family to once again be 'Open Sans'.

如果我删除.ace-editor和输入，textarea ...的字体条目，我会得到一个非常好看的字体。转到计算属性，将字体系列再次显示为“Open Sans”。

So the question I'm trying to answer, is how can I either figure out what font is ACTUALLY being used when I cancel out the textarea entry from Bootstrap? Or why is this not accepting the monospace font when it is specified.

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

I'm somewhat assuming that 'Open Sans' may be monospaced, but whatever, it's still causing massive headaches.

我有点假设'Open Sans'可能是等宽的，但无论如何，它仍然会引起巨大的麻烦。

1 个解决方案

#1

The issue is caused by div included in bootstrap rule. It is too broad and breaks character width measurements for ace. You can add

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

.ace_editor div {
    font: inherit!important
}

as a workaround. Would be good to also report an issue to the creator of your bootstrap template.

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

#1