直接通过css控制和字体，使用高兼容性等宽字体栈如"sfmono-regular", consolas, "liberation mono", menlo, monospace，并配合高权重选择器（如body pre）或!important确保生效，同时兼顾中文字体与导出场景适配。
怎样在 HTML 编辑器里改 <pre class="brush:php;toolbar:false;"></pre> 和 <code> 的默认字体
直接改全局代码字体，不是靠编辑器设置，而是靠 CSS 控制。几乎所有 HTML 编辑器（如 VS Code、Sublime、Typora 或网页端编辑器）本身不提供“全局代码字体”开关；它们渲染预览或导出 HTML 时，最终依赖的是页面中的 <style></style> 或外部 CSS 文件。
常见错误是试图在编辑器偏好设置里找“代码块字体”，结果只改了编辑器自身的编辑区字体（比如 VS Code 的 editor.fontFamily），对导出/渲染后的 HTML 完全无效。
- 真正起作用的是给
<pre class="brush:php;toolbar:false;"></pre>、<code>、<tt></tt>等语义化标签加 CSS 规则 - 优先用
font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;—— 这是跨平台保真度最高的等宽字体栈 - 别只写
"Courier New"：Windows 可能 fallback 到模糊的位图字体，macOS/Linux 下可能缺失 - 如果用 Markdown 编辑器（如 Typora、Obsidian），需确认它是否允许注入自定义 CSS；Typora 要放
typora-user-style.css，Obsidian 要在「外观 → CSS 代码片段」里启用
为什么加 !important 有时还是没生效
因为编辑器生成的 HTML 常带内联样式或高权重选择器（比如 Jupyter 输出的 <pre class="brush:php;toolbar:false;" style="font-family: monospace;"></pre>，或 VuePress 用的 .theme-default-content pre）。单纯写 pre { font-family: ... } 很容易被覆盖。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 先用浏览器 DevTools（右键 → 检查）看实际生效的规则来源和层叠顺序
- 提高选择器权重：用
body pre、article pre，或更狠的pre[class] { ... } - 内联样式必须用
!important才能覆盖，但仅限你可控的 HTML；第三方组件（如 Prism.js 高亮后插入的<code>）可能动态加 style，此时得监听 DOM 或用:is()（现代浏览器） - 避免滥用
!important：它会让后续调试变困难，优先用更具体的选择器
不同场景下的字体配置差异
“全局”不等于“一刀切”。终端模拟、行内代码、多语言代码块对字体要求不同：
- 行内
<code>console.log()：建议用短栈，如"SFMono-Regular", monospace，避免加载过多字体拖慢渲染 - 大段
<pre class="brush:php;toolbar:false;"><code></code>（如日志、JSON）：加 <code>font-size: 0.95em</code> 和 <code>line-height: 1.4</code> 提升可读性</pre> - 含中文的代码（如 Python 注释、Vue 模板）：必须包含中文字体，例如
"Fira Code", "Noto Sans CJK SC", "Microsoft YaHei", monospace - 导出为 PDF（通过 Puppeteer 或 wkhtmltopdf）：确保字体已安装且支持嵌入，否则会回退到默认无衬线体
VS Code 编辑器预览插件的特殊处理
VS Code 自带的 Markdown 预览（Ctrl+Shift+V）用的是内置 WebView，CSS 隔离严格。直接在文档里写 <style></style> 不生效，必须走插件机制：
- 安装
Markdown Preview Enhanced插件后，可在文档顶部加<!-- @import "./custom.css" --> - 或在插件设置里填绝对路径到 CSS 文件（注意 Windows 路径要用正斜杠或双反斜杠）
- 不要用
@font-face加载远程字体：预览 WebView 默认禁用网络请求，本地字体文件也需放在工作区根目录下 - 验证是否生效：右键预览页 → “检查” → 查看
是否注入了你的样式 link
最易被忽略的一点：很多编辑器（尤其是基于 Electron 的）对 monospace 的解析不一致 —— macOS 认为它是 "Menlo"，Linux 是 "DejaVu Sans Mono"，而某些旧版 Windows 甚至映射到 "Lucida Console"。真要统一，必须显式列出完整字体栈，不能只靠泛名 fallback。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
