【油猴脚本】改变网页代码块的字体样式/美化LeetCode代码文字显示（CSS；设置@font-face和font-family）

美化网页的代码字体

脚本安装地址：

参考：改变网页代码块的字体样式

更新日志

V0.1

更新时间：2021年9月20日23:04:41

更新功能：

1、改变LeetCode、CSDN、博客园嵌入的代码的显示样式（由原来的宋体改为个人更喜欢的Cascadia Code或YaHei Consolas Hybrid或Lucida Console字体（当然，前提是用户本地安装了相应的字体）。后面还可以加上诸如Monacc，monospace的候选补充。要是你要自己喜欢的其他字体，那就在 font-family 后面加上字体名称就可以了，注意字体名称是打开字体文件后所显示的字体名称。比如：

V0.2

更新时间：2021年9月23日00:41:45

更新功能：

1、修复了在LeetCode编辑区选中文字时会出现因空格字符宽度变化而导致的闪跳和位移。

V0.3

更新时间：2021年9月24日16:17:07

更新功能：

1、解决了（准确来说是避免了）LeetCode编辑区字体设置为YaHei Consolas Hybrid时出现的光标偏移问题。

2、将LeetCode问题描述区的字体也改为了 Cascadia Code 和 YaHei Consolas Hybrid。

---

前言

不知道其他人有没有感觉LeetCode题解区的代码部分的字体有点不够美观，也可能是我的电脑上的本地字体库的原因吧……反正我是想改一改它的字体样式了……于是就有了写这个脚本的想法。

// CSDN的部分代码块的字体格式：
Source Code Pro,DejaVu Sans Mono,Ubuntu Mono,Anonymous Pro,Droid Sans Mono,Menlo,Monaco,Consolas,Inconsolata,Courier,monospace,PingFang SC,Microsoft YaHei,sans-serif!important

// CSDN的部分代码块的CSS选择器：
span.token, .prism-atom-one-dark .prism *

其中，只有 Ubuntu Mono 是免费可商用的，其他的都是商用需授权的字体。

另外，CSS选择器中有个 .prism-atom-one-dark，估计是因为我给自己的CSDN博客选的代码高亮主题为Atom One Dark吧。

// 掘金的部分代码块的字体格式：
Menlo,Monaco,Consolas,Courier New,monospace

// 掘金的部分代码块的CSS选择器：
.markdown-body code, .markdown-body pre

// 博客园的部分代码块的字体格式：
"Consolas","Bitstream Vera Sans Mono","Courier New",Courier,monospace !important

// 博客园的部分代码块的CSS选择器：
.syntaxhighlighter a, .syntaxhighlighter div, .syntaxhighlighter code, .syntaxhighlighter table, .syntaxhighlighter table td, .syntaxhighlighter table tr, .syntaxhighlighter table tbody, .syntaxhighlighter table thead, .syntaxhighlighter table caption, .syntaxhighlighter textarea

// LeetCode在线代码编辑器的部分代码块的字体格式：
Consolas, "Courier New", monospace

// LeetCode的部分代码块的CSS选择器：
#lc-home > div > div.main__1pRE > div.css-wfkj6v-Content.e1aolq224 > div > div.css-1gcn2k5-RightContainer.e1aolq221 > div.css-pwvbgl-CodeAreaContainer.ejldciv0 > div.css-w8jsc9-EditorContainer.ejldciv1 > div > div.css-1sdn0mk.css-ilak5e-Container.euyvu2f0 > div > div.overflow-guard > div.monaco-scrollable-element.editor-scrollable.vs-dark > div.lines-content.monaco-editor-background > div.view-lines.monaco-mouse-cursor-text

LeetCode在线代码编辑器的样式是通过内联样式设置的，实际上，如果要通过CSS选择器选中编辑区DOM元素，只需要最后面那个选择器就可以了：div.view-lines.monaco-mouse-cursor-text。

效果

在LeetCode上的显示效果：

在CSDN和掘金以及博客园也都有相同的效果，但是脚本设置匹配的网址是所有网址，所以理论上所有网站中的代码块的字体都会是这样。如果不想要脚本的作用范围太大，可以通过 @match 来自行设置想让脚本生效的网址（支持正则）。

---

知识点记录

1、如何确定一个字体是否是可以免费商用

更新：2021年9月22日11:38:22

昨天发了这篇博客，但是却显示审核不通过，而且有如下提示：

CSDN没有通过文字审核并提示我版权问题

注意：脚本中的 Cascadia Code 和 YaHei Consolas Hybrid 字体均为商用需授权的字体，希望用户抱有版权意识，切勿将以上字体在未经授权的情况下商用！

另外，本脚本只是建议用户在浏览网页时使用脚本中推荐的字体，而没有为用户提供下载相关字体的行为，所以不涉及版权问题。（审核君，如果你是担心这个，那么看到这里就不用担心了吧）脚本只是建议用户使用相关字体来显示网页内容，但是用户到底用不用就由用户自己决定了。

【更新结束】

在【求字体】这个网站可以输入字体名字来查询某款字体是否可以免费商用。

更新：2021年9月20日23:15:40

参考：怎么判断一款字体是否可以商用？ - 知乎

参考：字体下载-求字体网提供中文和英文字体库下载、识别与预览服务，找字体的好帮手

参考：网页设计中最常用的字体有哪些？（中文和英文） - 知乎

---

2、如何通过脚本修改网页字体样式

更新：2021年9月20日23:24:47

参考：用油猴脚本修改博客园代码显示字体和字号 - 开发者知识库

参考：油猴脚本修改网页默认字体 - reasoner - 博客园

---

3、通过设置 @font-face 来指定服务器上的某款字体

更新：2021年9月20日23:54:55

参考：【尚硅谷】Web前端零基础入门HTML5+CSS3基础教程-76_尚硅谷_字体族.mp4丨初学者从入门到精通_哔哩哔哩_bilibili

参考：网页引入特殊字体的几种方案 - Jess_喵 - 博客园

---

4、LeetCode在线代码编辑器光标偏移问题汇总

因为这里有许多坑，所以这个问题我单独拎了出来，详情请看另外一篇文章：

更新：2021年9月24日16:55:54

参考：【网页字体样式】LeetCode编辑区光标偏移问题汇总（油猴脚本；font-family；字体宽度）_赖念安的博客-CSDN博客

---

5、如何在本地编辑器里编辑油猴脚本并同步到油猴扩展

更新：2021年9月22日01:03:52

参考：How to edit scripts with your favorite editor? - Violentmonkey