如果你在Markdown里想改字体大小、颜色、还想着像Word一样把字变红变大第一反应大概率是搜一圈语法手册然后发现标准Markdown语法压根没有这些能力。加粗倒是有而且很简单。但字体颜色和大小几乎每个刚接触Markdown的朋友都会被卡一下——“到底能不能改”“怎么改”“为什么在有些地方改了没效果”这篇内容就是把你遇到的所有问题一次说透包括标准语法边界、HTML内嵌写法、各平台兼容性、以及从编辑器到导出PDF的完整实操。适用人群是正在用Typora、Obsidian、VS Code写文档又需要做重点标注、美化排版或者想把笔记转成带颜色PDF的朋友。我会直接给出可以复制粘贴的方案也会说清楚哪些坑是新手必踩的。1. 为什么标准Markdown改不了字体大小和颜色1.1 标准Markdown的格式能力边界到底在哪Markdown诞生的时候定位就不是“富文本排版工具”而是一种“易写易读的纯文本标记语言”。设计者希望写作者完全专注内容把排版交给渲染器处理。所以标准语法里给到你的格式化能力非常克制基本就这几样加粗**文字**或__文字__斜体*文字*或_文字_删除线~~文字~~行内代码文字引用 文字标题#到######列表、表格、链接、图片、分隔线等你会发现这里面根本没有“字体大小”“字体颜色”这两个概念。因为标准Markdown的哲学是我只标记这段文字的结构角色比如它是标题、是强调、是引用至于标题显示多大字号、强调用什么颜色那是渲染主题和CSS的事。同一个## 标题在小屏幕和宽屏显示器上可能显示不同的像素大小这属于正常现象。用一句话来理解就是Word是“所见即所得”你涂成红色它就是红的Markdown是“结构即内容”你标记它是“重点”至于重点长什么样由皮肤说了算。这说明了一件事——如果你需要每个字都精确到某个字号和某个色值那Markdown本身确实不是合适的工具但我们可以用HTML来补充。1.2 为什么网上很多教程说要“用HTML标签”既然标准语法不支持那大家自然就会想别的招。结果发现几乎所有Markdown渲染器背后都会把Markdown先转成HTML再渲染成网页。这一点就是解决问题的钥匙既然Markdown最终会变成HTML那我在Markdown里直接写HTML标签能不能被渲染答案是可以。大部分Markdown解析器比如Markdown-it、CommonMark实现、Typora内置的解析器都允许内嵌HTML标签。于是“字体大小、颜色”这种标准语法做不到的事情很自然地就用HTML标签补充了。这属于Markdown官方文档里默认允许的“HTML内嵌”能力不是歪门邪道只是很多人不知道而已。还有一个重要原因加粗、斜体这类需求标准语法已经覆盖了完全够用。真正缺的是颜色、字号、字体类型而这些只能靠HTML或者CSS来解决。所以网上所有讲“Markdown设置字体颜色”的教程本质上都在教你写HTML标签。2. 用HTML标签实现字体大小、颜色、加粗2.1 三种主流写法以及它们的区别在Markdown里改字体大小和颜色实践中有三种写法。新手上来不要贪多重点掌握第二种剩下的了解即可。第一种是font标签老HTML里的写法font colorred红色文字/font font color#FF5722 size4橙色文字4号字/font这种写法在Typora里能正常渲染但注意size的取值范围是1到7它不是精确像素更接近一种相对比例。而且font标签在HTML5里已经不推荐使用了一些严格的渲染环境比如某些博客平台的安全过滤可能会直接剥掉它。第二种是内联样式也就是用span标签配合style属性这也是我最推荐的写法span stylecolor: #E8590C; font-size: 20px;橙色20像素/spanstyle里可以同时控制颜色、字号、字体类型、加粗全部属性一把梭。这种写法兼容性最好主流Markdown编辑器基本都认而且精确可控。第三种是在文档头部声明CSS类然后引用类名style .highlight { color: #C0392B; font-size: 1.25em; font-weight: bold; } /style span classhighlight这段文字套用highlight类的样式/span这种方式适合一个文档里有很多相同样式的文字。你只在开头定义一次后面任何地方都能用classhighlight引用。如果只是偶尔用一两次颜色没必要搞类直接内联样式更方便。2.2 可以直接抄走的格式化模板以下模板我都在Typora和Obsidian里实测过可以直接复制去用。单色文字span stylecolor: #D32F2F;这是红色文字/span span stylecolor: #1976D2;这是蓝色文字/span span stylecolor: #388E3C;这是绿色文字/span调字号span stylefont-size: 12px;小号字适合注释/span span stylefont-size: 18px;中号字适合强调内容/span span stylefont-size: 24px;大号字适合段落标题效果/span组合使用大小、颜色、加粗、字体类型一次搞定span stylecolor: #E65100; font-size: 20px; font-weight: bold; font-family: 微软雅黑, sans-serif; 这段文字是橙色、20像素、加粗、微软雅黑的样式 /span背景高亮类似荧光笔效果span stylebackground-color: #FFF3CD; padding: 2px 4px; border-radius: 3px; 这行文字带有淡黄色背景适合做批注类提醒 /span这里有个细节要说一下加粗这件事建议能用标准语法就用标准语法也就是**加粗**。因为标准语法在纯文本状态下依然可读而strong或stylefont-weight: bold只有在渲染后才能看到效果。只有当你需要“既指定颜色又加粗”的时候才用HTML一把梭。这是我写Markdown几年下来的个人习惯。2.3 为什么推荐用内联样式而不是font标签直接说明原因。font标签有两个问题比较麻烦第一size属性是相对单位1最小、7最大渲染出来的实际像素由浏览器或编辑器的默认样式决定不同平台可能有差异。而CSS的font-size可以直接写px像素、em相对字号、rem相对根字号、pt磅值精确稳定。第二font不支持字体类型设置你要换font-family还得再套一层style等于画蛇添足。而内联样式里font-family、font-weight、line-height、letter-spacing都能写一个标签全搞定。第三从平台兼容性看很多支持HTML过滤的平台典型如GitHub虽然允许span但会清理掉style属性这种情况下font同样也会被处理掉。所以选内联样式至少在你本地编辑器里的体验是一致的。一句话总结我的选型建议要精确控制就用span style要批量统一就用style块 class类别再用font了它已经是被HTML5淘汰的旧标签。3. 主流编辑器和平台的兼容性坑3.1 同一份文档换个平台颜色就消失这个问题太典型了。你在Typora里写得花里胡哨红橙黄绿清清楚楚结果把md文件上传到GitHub或者某些博客平台一看颜色没了字号也没了只剩下光秃秃的文字。原因很简单不是每个平台都允许渲染内嵌HTML样式。我做了个测试整理了主流场景的兼容性情况平台/编辑器内联style是否生效备注Typora支持实时预览本地写作体验最好Obsidian支持设置里需要开启HTML渲染相关选项VS Code Markdown预览支持预览正常内置导出PDF需额外配置GitHub有限支持span标签可用但style属性会被剥离知乎/公众号不支持粘贴Markdown后HTML会被清掉语雀部分支持依赖编辑器的富文本转换逻辑Notion不支持粘贴时会过滤掉HTML从这个表能看到一个规律所有“在线内容平台”出于安全考虑都会做HTML白名单过滤而style属性几乎是第一批被清理的对象。那该怎么应对我有三个原则第一不要把颜色和字号作为唯一的信息载体。比如重要的警示内容可以在HTML设置颜色的同时也用Markdown的引用语法包一层。这样即使颜色失效引用块也还在读者依然能看出这是强调内容。第二如果你确定文章最终会发到某个不支持内联样式的平台上那就在写作时干脆不用颜色改用Markdown原生的强调手段比如加粗、引用、列表、任务事项。这些在任何平台都不会丢。第三如果你就是需要一个带颜色的正式文档建议在本地用Typora或Obsidian完成排版导出PDF或HTML后再分发。这样颜色是直接烧进PDF里的任何平台打开都是一样的效果。3.2 编辑器不支持内嵌HTML时怎么办有些极简编辑器或者部分在线的Markdown编辑器会直接关闭HTML渲染。你用span标签写的颜色它会原样显示成尖括号文本非常难看。判断方式很简单在编辑器里写一行span stylecolor:red测试/span如果预览区显示红色“测试”说明支持如果预览区显示的是span stylecolor:red测试/span这段代码本身说明它把HTML当纯文本处理了。遇到这种编辑器我的建议是换工具。不是说这个编辑器不好而是你用它的场景大概率不适合做精细排版。Markdown编辑器那么多好用且免费的多的是除非你被困在某个平台内部编辑器里没办法换。如果是平台场景那就回到上一节说的用标准语法做强调别折腾了。4. 实操过程在Typora里改好颜色并导出PDF4.1 最常用的实操模板与实时预览我日常最常用的场景是在Typora里写项目文档、周报、技术备忘需要把关键结论用颜色标出来。操作流程非常快第一步打开Typora新建一个md文件。在偏好设置里确认一下“Markdown扩展语法”中的“内嵌HTML”是打开的一般默认开启。第二步写一行核心测试直接把下面这段粘贴进去这是一段普通文字这是span stylecolor: #D32F2F; font-size: 18px; font-weight: bold;关键结论/span后面继续写正常内容。第三步光标放到那行文字上预览区立刻就能看到效果。如果你没看到红色变大加粗的效果先确认是不是输入法把尖括号换成了全角符号。这个“先测一行再复用”的习惯能帮你避免写完大量内容才发现渲染不出来的尴尬。我自己每次换新环境第一步都是先建一个_test.md专门测试HTML标签和中文渲染效果。4.2 批量统一样式的技巧文档开头定义CSS类如果文档里要标注很多处相同颜色的文字每个地方都写一遍style会非常冗余而且改起来麻烦。这时候就用前面提到的类选择器方案。做法是在文档开头放一段style定义style .tip { color: #1E88E5; font-weight: 600; } .warn { color: #E65100; font-weight: 700; } .danger { color: #C62828; font-weight: 700; text-decoration: underline; } .code-note { background-color: #F5F5F5; padding: 2px 6px; border-radius: 4px; font-family: JetBrains Mono, Consolas, monospace; } /style然后在正文里这样用span classtip提示内容/span span classwarn警告内容/span span classdanger危险内容/span span classcode-notecommand -v test/span好处是显而易见的如果我觉得蓝色不够深只需要改文档最上面那个#1E88E5整个文档所有引用到tip类的地方会同步更新。这比逐处修改要高效太多。4.3 从Markdown导出带颜色的PDF需要配置什么很多人卡在这一步。Typora自带导出PDF功能而且对HTML样式的保留能力很好基本你预览是什么样的导出PDF就是什么样。所以如果你用的是Typora直接文件→导出→PDF就行颜色、字号、中文字体都会保留。如果你用的是VS Code事情就稍微绕一点。最常用的方案是安装 “Markdown PDF” 这个扩展。安装之后在打开的md文件里右键选择 “Markdown PDF: Export (pdf)”。这个扩展的原理是先把Markdown转换成HTML再用无头浏览器打印成PDF。默认情况下中文字体可能不是很好看需要在扩展设置里指定一个中文字体。打开设置搜markdown-pdf.executablePath和markdown-pdf.styles。后者可以指定一个额外的CSS文件路径推荐在里面写body { font-family: PingFang SC, Microsoft YaHei, Noto Sans CJK SC, sans-serif; }这里有个来自搜索热词的小细节很多人搜索“vscode要将markdown文件导出为pdf需要下载princexml”。确实早期某些版本的Markdown PDF扩展依赖PrinceXML来处理PDF转换但新版本走的路径不太一样了。如果你在安装扩展时被提示需要安装额外组件直接按提示下载即可。不想折腾的话直接用Typora导出PDF是省心得多。还有一招更通用先用Typora或VS Code预览然后在浏览器里打开HTML再用浏览器的“打印”功能存成PDF。这样浏览器支持什么字体PDF就是什么字体几乎没有兼容性损失。4.4 导出PDF常见的三个字体和样式问题导出PDF后字体不对、颜色变了这是常有的事。我把遇到的几种情况列一下。第一个问题是中文字体被替换成宋体或默认黑体后很丑。解决方法是上面说的在CSS里显式声明字体族。如果你定义了font-family: Microsoft YaHei但系统里没有装这个字体就会退化到默认字体。所以建议写字体列表PingFang SC, Microsoft YaHei, Noto Sans CJK SC, sans-serif这样macOS、Windows、Linux上都能找到可用字体。第二个问题是颜色在导出后看起来变浅了。这个大多数时候不是bug而是屏幕显示和纸张打印的色域差异。解决方案是在选颜色的时候避免用太浅的色值比如#F5F5F5这种接近白色的颜色在屏幕上能看到打印到纸质PDF上就几乎看不见了。用于重要强调推荐至少用#666666以下的深色系。第三个问题是在VS Code导出PDF时style块里的类定义可能没被加载。这在旧版本的Markdown PDF扩展里偶发。应对办法是把需要用的样式直接写成内联样式实在不行再排查CSS文件引用路径。5. 常见问题速查与独家避坑技巧5.1 问题速查表现象可能原因解决方案颜色设置无效显示成源码当前编辑器不支持HTML渲染换Typora/Obsidian等支持HTML的编辑器换行后样式丢失标记了颜色的内容跨越了多个段落每个段落单独套一个span标签GitHub上颜色不显示平台安全过滤剥离了style属性不要依赖颜色传递唯一信息改用引用或加粗strong标签显示为文本标签没闭合或编辑器HTML开关被关闭检查标签完整性开启动态HTML支持导出PDF后颜色变浅打印色域差异使用饱和度更高的深色调中文字体变成宋体未指定字体族CSS中设置PingFang SC, Microsoft YaHei等字体栈字号写了24px但变化不大被外层CSS覆盖给span加!important或检查编辑器样式用了font size7但平台显示不同font标签相对单位在不同平台渲染不同改用带px单位的CSS样式5.2 为什么有些Markdown编辑器里字体大小会失效这里有个隐蔽的坑。部分主题会对外层容器设置统一的font-size而你的内联样式如果用的是相对单位比如1.2em它是相对于父元素的这时候看起来可能没有达到预期的放大效果。处理方式有两种。一种是用绝对单位px它不受父元素影响。另一种是在样式里加!important强制覆盖适合遇到顽固CSS优先级问题时使用。但注意!important是最后的手段不要所有地方都用否则以后想改样式会变得很痛苦。另外Obsidian里部分主题会定义自己的.markdown-preview-view等类选择器优先级不低。遇到内联样式不生效的时候先检查是不是主题的CSS权重太高再决定怎么覆盖。5.3 两个我踩过多次的经验第一个经验不要在同一个段落里频繁切换颜色。Markdown的价值在于内容结构和可读性如果一段话里三种颜色来回跳渲染出来像霓虹灯一样阅读体验很差。我现在的做法是颜色只用来标记“最终结论”和“风险提示”每篇文档里不超过两到三种颜色。黄、橙、红或者蓝、绿选定一套就不要乱加。第二个经验纯文本状态下也要保证可读性。有时候md文件会被直接复制到聊天窗口、邮件或者不支持渲染的地方。如果我把所有重点都写在HTML的span里纯文本状态下这些标签会混在文字里根本没法看。所以我的习惯是重点内容先用Markdown原生的**加粗**写一遍在这个基础上再套HTML颜色标签。比如**span stylecolor: #D32F2F;这个结论很重要/span**这样即使颜色失效加粗依然保留纯文本状态下符号也少很多。这是一个很实用的小技巧相当于上了双保险。还有一个细节是Markdown里面写HTML标签时标签和中文之间最好别有空格否则某些解析器会把空格也吃进去导致渲染出来的文字前后多了一个空格。这不算大问题但强迫症看了很难受。写在最后的个人习惯我个人搞了好几年Markdown最深的体会是Markdown天生就不是拿来“排版”的它是拿来“组织内容”的。字体大小、颜色这类视觉层的东西偶尔用HTML补一下没问题但如果整个文档从头到尾都是颜色标签、字号标签那说明这个文档已经不适合用Markdown写了换个富文本编辑器或者直接用Word会更合适。我自己的底线是能用Markdown标准语法解决的就不上HTML比如加粗、斜体、引用、任务列表必须用视觉强调的控制在一篇文档三处以内文档最终如果是要给别人看的我会优先考虑导出PDF或HTML保证颜色不丢失。最后再分享一个小操作每次写完带颜色的Markdown文档我都会用浏览器打开导出的HTML检查一遍颜色在浅色和深色两种模式下是否都清晰很多颜色在深色模式下会显得刺眼这一步能帮你避免不少发布后才发现看不清的尴尬。