Markdown 字体样式与颜色指南🎨 简介 📖 在 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>
|
效果展示：
多彩大字
中等青色文字
蓝色黑体文字
渐变色彩效果
1
2
3
4
5
6
|
<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. 创建颜色样式模板
1
2
3
4
5
6
7
8
9
10
11
|
<!-- 成功提示 -->
<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. 阴影效果
1
2
3
4
|
<font style="text-shadow: 2px 2px 4px rgba(0,0,0,0.5)"
color="#ffffff" size="5">
带阴影的文字效果
</font>
|
注意事项 ⚠️
- 兼容性问题：某些 Markdown 解析器可能不支持 HTML 标签
- 移动端适配：固定大小的字体在移动设备上可能显示不佳
- 可访问性：确保颜色对比度足够，方便阅读
- 适度使用：避免过度使用样式影响阅读体验
推荐工具 🛠️
在线颜色选择器
Markdown 编辑器
- Typora - 支持实时预览
- VS Code - 带有 Markdown 预览插件
- StackEdit - 在线 Markdown 编辑器
浏览器支持情况 🌐
| 浏览器 |
HTML 支持 |
Markdown 支持 |
| Chrome |
✅ 完整支持 |
✅ 完整支持 |
| Firefox |
✅ 完整支持 |
✅ 完整支持 |
| Safari |
✅ 完整支持 |
✅ 完整支持 |
| Edge |
✅ 完整支持 |
✅ 完整支持 |
通过灵活运用这些字体样式技巧，您可以让 Markdown 文档更加生动和美观！记得保持适度，确保内容的可读性和专业性哦！😊
