Markdown 字体样式与颜色指南🎨

Markdown 字体样式

简介 📖

在 Markdown 中，虽然原生语法不支持直接设置字体样式、大小和颜色，但我们可以通过 HTML 标签来实现这些效果。本指南将详细介绍如何在 Markdown 中使用各种字体样式。

字体样式示例 🎯

1. 黑体 (Heiti)

1	<font color=#00ffff size=4 face="黑体">我是黑体字</font>

我是黑体字

2. 微软雅黑 (Microsoft YaHei)

1	<font color=#00ffff size=4 face="微软雅黑">我是微软雅黑</font>

我是微软雅黑

3. 华文彩云 (STCAIYUN)

1	<font color=#00ffff size=4 face="STCAIYUN">我是华文彩云</font>

我是华文彩云

4. 华文行楷 (STXingkai)

1	<font color=#00ffff size=4 face="华文行楷">我是华文行楷</font>

我是华文行楷

5. 宋体 (SimSun)

1	<font color=#00ffff size=4 face="宋体">我是宋体</font>

我是宋体

6. 仿宋体 (FangSong)

1	<font color=#00ffff size=4 face="仿宋">我是仿宋体</font>

我是仿宋体

7. 幼圆 (YouYuan)

1	<font color=#00ffff size=4 face="幼圆">我是幼圆</font>

我是幼圆

颜色代码参考表 🎨

常用颜色代码

颜色名称	十六进制代码	示例
深红色	`#8B0000`	深红色文本
红色	`#FF0000`	红色文本
橙色	`#FFA500`	橙色文本
金色	`#FFD700`	金色文本
黄色	`#FFFF00`	黄色文本
绿色	`#008000`	绿色文本
蓝色	`#0000FF`	蓝色文本
深蓝色	`#00008B`	深蓝色文本
紫色	`#800080`	紫色文本
粉色	`#FFC0CB`	粉色文本
青色	`#00FFFF`	青色文本
灰色	`#808080`	灰色文本

字体大小参考表 🔢

Size 参数对照表

Size值	大致对应字号	示例
1	8px	极小文字
2	10px	较小文字
3	12px	普通文字
4	14px	稍大文字
5	18px	大文字
6	24px	较大文字
7	36px	超大文字

组合使用示例 ✨

多种样式组合

1
2
3

<font color="#FF6B6B" size="5" face="微软雅黑">多彩大字</font>
<font color="#4ECDC4" size="3" face="宋体">中等青色文字</font>
<font color="#45B7D1" size="4" face="黑体">蓝色黑体文字</font>

效果展示：

多彩大字中等青色文字蓝色黑体文字

渐变色彩效果

<font color="#FF9A8B" size="4">🔴</font>
<font color="#FF7F50" size="4">🟠</font>
<font color="#FFD700" size="4">🟡</font>
<font color="#98FB98" size="4">🟢</font>
<font color="#87CEEB" size="4">🔵</font>
<font color="#D8BFD8" size="4">🟣</font>

效果展示：

🔴 🟠 🟡 🟢 🔵 🟣

实用技巧 💡

1. 创建颜色样式模板

<!-- 成功提示 -->
<font color="#28a745" size="4" face="微软雅黑">✅ 操作成功！</font>

<!-- 警告信息 -->
<font color="#ffc107" size="4" face="黑体">⚠️ 请注意！</font>

<!-- 错误提示 -->
<font color="#dc3545" size="4" face="宋体">❌ 发生错误！</font>

<!-- 信息提示 -->
<font color="#17a2b8" size="4" face="仿宋">💡 提示信息</font>

2. 响应式字体大小

1
2
3

<font style="font-size: calc(12px + 0.5vw)" color="#6c757d">
自适应大小的文字
</font>

3. 阴影效果

<font style="text-shadow: 2px 2px 4px rgba(0,0,0,0.5)" 
      color="#ffffff" size="5">
带阴影的文字效果
</font>

注意事项 ⚠️

兼容性问题：某些 Markdown 解析器可能不支持 HTML 标签
移动端适配：固定大小的字体在移动设备上可能显示不佳
可访问性：确保颜色对比度足够，方便阅读
适度使用：避免过度使用样式影响阅读体验

浏览器支持情况 🌐

浏览器	HTML 支持	Markdown 支持
Chrome	✅ 完整支持	✅ 完整支持
Firefox	✅ 完整支持	✅ 完整支持
Safari	✅ 完整支持	✅ 完整支持
Edge	✅ 完整支持	✅ 完整支持