更新：2021年9月24日16:53:47

前情参考：【油猴脚本】改变网页代码块的字体样式（CSS；设置@font-face和font-family）_赖念安的博客-CSDN博客

如果使用我写的脚本来改变字体样式，那么如果设置LeetCode在线代码编辑器的编辑区为Cascadia Code字体，那么可能会出现光标偏移的问题，初步推断应该是Cascadia Code 字体的宽度和原来的Consolas字体宽度不一样导致的。

但是原来的Consolas字体的中文样式我不大喜欢，但是不能用与之前的同一个 font-family 设置，所以没办法，只好多加一个CSS选择器专门来设置LeetCode编辑区的字体。

注意，应该选一款和原来的Consolas字体宽度一致的字体，否则也会出现光标偏移的问题。YaHei Consolas Hybrid 的中英文显示效果都很不错，且其宽度和Consolas的宽度一样。而且在遇到Cascadia Code之前，我一直是用的这个字体。

更新：2021年9月23日00:51:48

事情没有我想的那么简单，虽然解决了上面提到的问题，但是在LeetCode编辑区选中文本时还是出现了很奇怪的问题：

经过观察，我发现是因为’YaHei Consolas Hybrid’字体和’Consolas’字体的 · 字符（就是中文状态下Esc键下面的那个键）的宽度不一样导致的（前者的 · 比后者窄）。而LeetCode会默认将选区中的空格（也就是 ;）替换显示为 · 。所以我把编辑区原本的’Consolas’字体换成’YaHei Consolas Hybrid’后，一旦选中空格后，其所在位置的宽度就会变窄，于是就导致了上面动态图中的情况。

后来我通过开发者工具发现了 · 字符会被一个 标签包裹，且其有一个特别的类属性值：mtkw。

所以我就在脚本中直接针对这个 · 字符特别设置其字体为原来的’Consolas’。结果总算是解决了问题。

更新：2021年9月24日01:05:34

又出现问题了……还是奇怪的光标偏移问题，如下图：

于是我就利用开发者工具开始查看这些字符的宽度，其中：

而这种情况下就不会出现光标偏移的情况。

而这种情况下，由于 9.64>8.8 ，所以就会出现光标偏移的情况。

可以看到，只要字符 [ 和 字符 j 不放在以前，那么这款字体的所有字符宽度都保持为 8.8 ，而一旦将这两个字符放在一起，那么这两个字符的宽度就会变为 9.78。这就是导致有些文本行会出现光标偏移的原因。

PS：在测试各个字符宽度的显示时，我偶然又发现字符 f 和字符 ] 挨在一起时，两者的宽度也会改变，但不是改为 9.78，而是改为了 9.39。所以感觉这款字体好像不是真正意义上的等宽啊，感觉不大稳定的亚子😂 ……不过也可能确实是字体本身的设计，那就没啥好说了……

我一时间也没有什么好的解决办法，只好把编辑区的英文字体保持为原本默认的Consolas，而注释中的中文则设置为我比较喜欢的YaHei Consolas Hybrid。

被这个问题搞得挺膈应的，感觉挺折磨人的，就不再花时间深究了，毕竟字体的问题是设计师要考虑的。

更新：2021年9月24日13:56:26

网上看到有人好像有类似的问题：

参考：Custom text editor character width issue - CodeProject

【网页文本编辑器解决方案】

参考：Quickstart - Quill Rich Text Editor

参考：5 Free JavaScript Libraries to Add Text Editing to Your Web Application

参考：ajaxorg/ace: Ace (Ajax.org Cloud9 Editor)

参考：Ace - The High Performance Code Editor for the Web

更新：2021年9月24日15:47:16

参考：Source Code Pro 字体其实并不完美 - 云+社区 - 腾讯云

参考：? Jetbrains Mono、FiraCode、Source Code Pro、Consolas评测，哪款是你的菜？ - 云+社区 - 腾讯云