很多刚接触 Markdown 的朋友都会有这样的困惑我明明需要用字号、颜色来突出重点翻遍语法手册却只找到加粗、斜体、引用这些基础写法。搜了半天发现有人用一串看起来像 HTML 的代码把字变红了、变大了于是更懵了。这篇文章就把这件事彻底讲清楚。我会先说明为什么标准 Markdown 不支持直接设置字体大小和颜色再给出跨平台通用、编辑器内置、博客定制这三条路线配合可复制的代码块和实测效果让你看完就能在自己的文档、博客、项目 README 里做出想要的排版效果。你要是在 Typora、VS Code、语雀、Hexo 这类环境里被字体问题卡过这篇文章就是冲着你来的。1. 先搞清楚边界标准 Markdown 到底管不了哪些事Markdown 的设计哲学是易读易写它把精力都花在结构化排版上比如标题、列表、引用、代码块、表格。至于字体大小、颜色、字体系列这类视觉表现层的东西压根不在它的核心语法范围里。你翻遍 CommonMark 规范也找不到一个font-size关键字这不是设计缺陷而是有意为之——纯文本要保持跨平台的一致性。那为什么有人能在 Markdown 里改字号和颜色因为绝大多数 Markdown 渲染器在解析文本时允许内联 HTML 标签和 CSS 样式透传过去。也就是说你不是在用 Markdown 语法改字体而是在 Markdown 文档里直接写 HTML 和 CSS让最终负责渲染的浏览器或编辑器去解释它们。有一个天然的分工需要记住需求Markdown 原生能力推荐方案加粗支持**加粗**直接用 Markdown 语法斜体支持*斜体*直接用 Markdown 语法删除线部分平台支持~~删除~~直接用 Markdown 语法字体颜色不支持HTMLfont或span标签字体大小不支持HTMLfont或span标签配合 CSS字体类型不支持HTMLspan标签配合 CSSfont-family背景高亮不支持HTMLmark标签或span配合 CSS在这张表里加粗是唯一一个标准语法直接支持的字体相关样式这也是为什么你搜Markdown 加粗能搜到明确的答案而搜Markdown 颜色搜出的内容五花八门、说法不一。有个容易踩的坑必须提醒你如果你把**加粗**和 HTML 标签混用比如**span stylecolor:red红色加粗/span**在某些平台上会解析失败。更稳妥的写法是span stylecolor:red; font-weight:bold;红色加粗/span用 CSS 的font-weight属性来实现加粗而不是依赖 Markdown 的**符号。2. 内联 HTML 标签最通用的字体控制方案既然标准语法管不了字体我们就把 HTML 请进来。目前主流 Markdown 渲染器默认允许内联 HTML所以这套写法在 Typora、VS Code Markdown Preview、语雀、掘金、博客园、Hexo 等绝大多数环境下都能生效。先说最简单的一招用font标签。虽然 HTML5 里font已经标记为过时标签但 Markdown 渲染器基本都兼容胜在写法简单、一眼能看懂font colorred红色文字/font font color#00aaff十六进制颜色文字/font font size4四号字/font font face微软雅黑微软雅黑字体/fontcolor属性可以直接填英文颜色名red、blue、green 等也可以填十六进制色值如#ff6600、#2ecc71。size属性的取值范围是 1 到 71 最小、7 最大它是相对字号不是精确的像素值。face属性指定字体族但能不能生效取决于读者设备上是否安装了对应字体。你要是追求更精细的控制别用font用span配合 style 属性这是我在实际项目中几乎唯一使用的方案span stylecolor: #e74c3c; font-size: 20px;自定义颜色的文字/span span stylefont-family: Courier New, Consolas, monospace;等宽字体代码风格/span span stylecolor: #333; background-color: #f1c40f; font-weight: bold; 带背景色且加粗的重点文字 /spanstyle 里的 CSS 属性可以自由组合。font-family后面可以写多个备选字体用英文逗号隔开浏览器会按顺序寻找可用字体这是避免某些设备没有指定字体导致显示异常的常用做法。还有一类需求经常和字体样式一起出现把一段文字标成批注感觉的样式。可以用mark标签做荧光笔效果mark这是荧光笔标注效果/markmark标签在 Markdown 里会默认渲染出黄色背景如果你不喜欢默认的黄用span自己加背景色更可控。在实际写作里我习惯把常用的几种样式组合封装成模板片段直接替换文字即可span stylecolor: #c0392b; font-size: 18px; font-weight: bold;[重点结论]/span span stylecolor: #2980b9; font-size: 16px;[补充说明]/span span stylecolor: #27ae60; font-size: 15px;[操作提示]/span这套配色方案选的是蓝色系和绿色系适合技术文档里的备注和成功提示语义红字留给警告性内容。你可以根据自己博客的配色风格调色。讲一个细节很多编辑器里span开头的行如果把光标放上去会触发 HTML 标签自动闭合容易多出多余的/span。解决方法是写完标签后把光标移开或者先写标签再往里填文字不要依赖编辑器的补全。3. 用 CSS 统一管理样式博客和长文档的正道内联 style 虽然灵活但有一堆毛病每个标签都要写一长串文档一长就是灾难如果想统一调整某类文字的颜色你得全文搜索替换。所以只要你的 Markdown 最终会渲染成网页比如 Hexo、VuePress、Hugo 这类博客站就应该用 CSS 统一管理字体样式。方法一把 CSS 声明写在 Markdown 文档开头的style块里。不是所有渲染平台都允许文档内嵌style很多在线平台出于安全考虑会过滤掉 style 标签但本地编辑器如 Typora和自建博客站通常支持style .custom-red { color: #c0392b; } .custom-blue { color: #2980b9; font-weight: bold; } .custom-lg { font-size: 20px; } /style span classcustom-red这是红色自定义类/span span classcustom-blue这是蓝色加粗自定义类/span span classcustom-lg这是大号字/span这种方式的优势非常明显你只需要在文档开头维护一小段样式表后面正文里用 class 名就能反复引用改一处全篇生效。我在写开发文档时先把危险警告重要提醒示例代码说明等几种 class 定义好正文写作完全没有重复劳动。方法二把样式写进主题文件适合 Hexo 这个场景。在 Hexo 博客里找到themes/你的主题/source/css/目录下的 main CSS 文件在末尾追加自定义样式.md-font-warn { color: #d35400; font-size: 18px; } .md-font-tip { color: #16a085; border-bottom: 1px dashed #16a085; }然后在 Markdown 文章里写span classmd-font-warn...就能引用。同理VuePress 可以把样式放进.vuepress/styles/index.stylHugo 放进static/css并挂载。方法三全局body或标题字体定制。如果你想把博客全文的默认字体都换成系统没有的第三方字体如 Noto Serif SC、JetBrains Mono在 CSS 里加body { font-family: Noto Serif SC, Source Han Serif SC, Microsoft YaHei, serif; } code, pre { font-family: JetBrains Mono, Fira Code, Consolas, monospace; }这属于字体类型层面的定制比单点修改影响面广得多适合追求统一视觉风格的博客作者。不过要记得引入网络字体如 Google Fonts会影响页面加载速度国内访问还需考虑网络环境稳妥的做法是优先使用读者本机大概率已安装的字体再在列表里兜底。关于 CSS 方案我的经验是优先考虑维护成本。如果你只有一篇文章需要特殊样式用内联 style 就够了如果是整个站点要统一风格务必走 CSS。混用两套方案最痛苦后面改版时要逐个标签去抠。4. 不同编辑器和平台的行事风格各不相同同样的 HTML 标签和 style在不同渲染器里的表现可能是天壤之别。这里我不做平台批评只用一个实测对比表说明情况顺便告诉你如何根据目标平台做取舍。下面是我在几个常见环境里验证过的结果环境font colorspan style文档内嵌style实测备注Typora 本地预览支持支持支持所见即所得体验最好VS Code 内置预览支持支持部分支持样式块在部分版本会失效内联更稳GitHub README支持支持不支持会过滤 style 块但允许内联 style知乎专栏支持支持不支持编辑器会清理部分属性语雀支持支持不支持依赖编辑器工具栏手写 HTML 会被转义Hexo/VuePress 博客支持支持支持完全由主题 CSS 体系决定为什么 GitHub 这种以严格著称的平台反而允许内联 style因为 GitHub 的 Markdown 渲染做了白名单过滤它允许常见的表现性样式属性如color、font-size、font-weight但限制了危险属性如position: fixed这类可能影响布局或引发攻击的写法。这给了我们一个启示写样式时尽量只写最常规的文本属性不要搞花活兼容性会好很多。再提醒一个反向场景如果你在 VS Code 里把 Markdown 转 PDF 或 Word字体颜色和大小能不能保留实测下来使用常见的 Markdown PDF 插件转换时HTML 标签和 CSS 属性都能保留但转换成 Word 时很多工具会丢失内联样式最稳的方案是先把 Markdown 转成带样式的 HTML再用 Word 打开 HTML 文件另存为 docx。这个技巧我踩了无数次坑才掌握先分享给你。后续你在不同平台间迁移文档时最好对每一处颜色和字号做一遍目视检查代码检测很难覆盖所有渲染差异。5. 组合拳实战一段完整的图文排版示例理论说完了我们把前面所有方法串起来写一个完整的实际案例。假设我要在一篇技术教程里做一个环境配置说明的小节里面有警告、命令、版本说明和最终效果用 Markdown 加 HTML 混合排版如下# 环境配置说明 本文要求使用 **Python 3.9**如果你还没有安装请参考官方文档。 span stylecolor: #e74c3c; font-weight: bold;注意/span span stylecolor: #555;Windows 用户请勿将 Python 安装到含中文或空格的路径下。/span 推荐使用虚拟环境创建命令如下 bash python -m venv .venv source .venv/bin/activate # Windows 下为 .venv\Scripts\activate安装依赖后用以下命令验证版本python --version如果输出Python 3.9.0及以上版本说明环境就绪。在这段示例中我刻意混合了三种能力 - **Python 3.9** 是标准 Markdown 加粗任何平台都不会出错 - 注意 一行用了红色加粗的 span表达强烈的提示语义 - 命令行的内联代码区用等宽字体加浅灰色背景突出风格字体类型上的区分让人一眼辨认出这是可执行命令 - 引用块 里嵌套 span 标签在 Typora 里渲染效果比纯引号文本更有层次感。 这类混排技巧在真实博客写作里出现频率极高因为你是在写一篇有信息层级的文章不是在做一个纯样式演示。掌握组合逻辑比记住单个标签重要得多。 我也测试过把这段内容放到 GitHub README 中展示颜色和加粗都能正常渲染只有引号代码块里的 padding 和 border-radius 这两个属性会被吃掉但整体视觉效果不受影响。GitHub 用户看到的效果可以接受。 ## 6. 编辑器的专属扩展语法只能在一处生效的偷懒写法 除了通用的 HTML 方案不少 Markdown 编辑器或博客平台还提供了自己的扩展语法。这些扩展通常更简洁但换一个环境就失效属于平台锁定的快捷方式。我举三个有代表性的例子。 Typora 支持一个超好用的语法要把一段文字标成扩展的高亮可以写 高亮它会渲染成黄色背景。这个语法在 GitHub 上扛不住GitHub 不识别 会原样显示两个等号。Typora 还支持 ^上标^ 和 ~下标~适合写化学式或数学表达式同样属于 Typora 专属扩展。 语雀是另外一套逻辑。在语雀文档编辑器里你可以选中文字直接通过工具栏改颜色和字号它底层存储的也是 HTML但你在 Markdown 模式下必须使用语雀自己的工具栏不能纯手写标签然后回切。一旦切换模式很多手写的标签会被转义。 还有一类是支持自定义容器的博客框架比如 VuePress 和 Docusaurus 都有 ::: tip、::: warning 这类容器语法 markdown ::: warning 这里是一段警示文字主题会赋予它黄色边框和背景色。 :::这种容器本质上还是套了一层预设 CSS只是不需要你手写类名。它的字体和颜色由主题决定你无法在写作时单独指定某个字是红色适合不差样式、图省事的快速排版场景。这种平台专属扩展有一个共同问题可移植性极差。你要是有一天把文章从 Typora 搬到语雀高亮会全部失效。所以在我的习惯里凡是需要强调的文字优先用标准 Markdown 加粗需要颜色时用通用 HTMLspan只有纯本地、不迁移的文档里才用平台扩展语法这个取舍建议适用于绝大多数人。7. 高频疑难场景排查为什么你的颜色没生效最后一部分直接给结论。我整理了几个反复被问到的高频问题和对应的排查思路全是从实际使用中总结出来的。第一个颜色标签明明写了但页面上没有任何变化。最常见的原因是渲染器过滤了 HTML 标签或者你用的平台要求先切换到源代码模式再写标签。排查思路很简单先用一个最简例子测试span stylecolor:red;test/span。如果红色都不出来那说明平台压根不允许内联 HTML后面做什么都白搭如果红色出来再逐步加其他属性用二分法定位是哪个属性出了问题。第二个字号设置了font-size: 20px显示却奇大无比。这种情况一般是你在标签里同时写了size属性和font-size样式两者叠加导致字号膨胀。size4大约等于medium再接一个20px可能就到large以上了。建议只保留一种方式个人推荐只用 CSS 的font-size因为它可以精确到像素size的 1 到 7 档位太粗。第三个导出 PDF 后字体变了。渲染 Markdown 预览时用的是编辑器的网页字体导出 PDF 则是重新排版如果目标 PDF 生成器不认识你指定的字体族就会回退到默认字体。解决办法是导出的主题中显式声明字体族和字号比如 VS Code 的 Markdown PDF 插件可以在配置里设置markdown-pdf.styles指定一个额外的 CSS 文件。第四个加粗和颜色同时失效。遇到这种复合样式翻车场景先把加粗从**改成font-weight: bold再测试。很多平台解析**时会在 HTML 标签前后插入额外的strong包裹最终生成不规范的嵌套结构导致样式被忽略。纯 CSS 写法虽然啰嗦但规避了 Markdown 解析器与 HTML 解析器的冲突属于最稳的写法。第五个代码块里的 Markdown 标签不被解析。这是因为代码块本身就会转义 Markdown 符号这是设计行为不是 bug。你想要在代码示例里展示带颜色的内容只能靠行内代码配合 HTML 标签不能指望代码块内部用 Markdown 做样式。日常写作的个人经验我在实际操作中形成了一套固定的取舍习惯优先用 Markdown 自身的加粗和引用表达语义需要精确配色时一律使用span style...而不用font颜色只用十六进制不靠感觉记颜色名正文里的颜色不超过三种保持警示红、信息蓝、成功绿的基本盘。最后分享一个能明显提高效率的小技巧在 VS Code 或 Typora 里配置自定义代码片段snippet。比如我在 VS Code 里敲red加 Tab 就会自动展开成span stylecolor: #c0392b;${1}/span敲blue展开成span stylecolor: #2980b9;${1}/span。这样写样式标签的速度几乎和写纯 Markdown 一样快不用每次手动敲一长串属性。配置方法是在 VS Code 的用户代码片段里新增一个 markdown.json定义若干个前缀即可。这套流程跑顺之后你会发现 Markdown 里调整字体样式其实一点都不繁琐。