【Debug】Ace Editor 輸入游標位置沒有對齊文字

狀況概述

最近在做 Side Project 時發現 Ace Editor 會有輸入游標無法與目前文字對齊的狀況，如下圖所示:

可以看到這張圖片在右側的部分，新輸入文字的位置，已經與原本文字的位置有一段距離。並且偏移的位置可能是偏左也可能是偏右。如以下這張圖就是偏左:

事件原因 & 解法

這邊大家可能會看到我使用了個特別的字體，整件事情就跟字體有關。

經過我查詢後，發現 Ace Editor 只能接受等寬字體(Monospaced Font)，所以在將字體修改後

1
2
3

#editArea *{
    font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !important;
}

便可以恢復正常