Markdown如何自定义字体样式：字体颜色、背景、斜体、粗体、下划线、删除线、高亮、下/上标

Markdown如何自定义字体样式：字体颜色、背景、斜体、粗体、下划线、删除线、高亮、下/上标

前言

最近写文章时，发现需要使用一些不同的Markdown语法来显示，在此整理和记录下这些语法，同时分享给大家。

一、字体大小

size：规定文本的尺寸大小，取值范围为1~7 ，浏览器默认值是 3。

注意，size值大于7也是可以显示的，但与7的字体大小一样

Markdown语法：

<font size=1>字体大小size=1</font>
<font size=3>字体大小size=3</font>
<font size=5>字体大小size=5</font>
<font size=7>字体大小size=7</font>

效果如下：

字体大小size=1
字体大小size=3
字体大小size=5
字体大小size=7

二、字体颜色

1. 英文字母

Markdown语法

<font color=red>红色</font>
<font color="green">绿色</font>
<font color="blue">蓝色</font>
<font color="BlueGreen">蓝绿色</font>
<font color=Yellow>黄色</font>
<font color=YellowGreen>黄绿色</font>

效果如下：

红色
绿色
蓝色
蓝绿色
黄色
黄绿色

2. 十六进制颜色值

Markdown语法

<font color=#000000>黑色</font>
<font color=#ff0000>红色</font>
<font color=#00ff00>绿色</font>
<font color=#0000ff>蓝色</font>

效果如下：

黑色
红色
绿色
蓝色

附：常用的颜色

颜色名	十六进制颜色值	rgb颜色
黑色（black)	000000	rgb(0, 0, 0)
蓝色（blue）	0000FF	rgb(0, 0, 255)
灰色（grey）	808080	rgb(128, 128, 128)
绿色（green）	008000	rgb(0, 128, 0)
橙色（orange）	FFA500	rgb(255, 165, 0)
红色(red)	FF0000	rgb(255, 0, 0)
黄色（yellow）	FFFF00	rgb(255, 255, 0)

三、字体背景色

由于 style 标签和标签的 style 属性不被支持，所以这里只能是借助 table, tr, td 等表格标签的 bgcolor 属性来实现背景色。这里对于文字背景色的设置，只是将那一整行看作一个表格，更改了那个格子的背景色（bgcolor）

Markdown语法

<table><tr><td bgcolor=orange>背景色orange</td></tr></table>

效果如下：

背景色orange

三、字体类型

注意，字体类型的设置只能在电脑上才能显示字体效果，在手机上无法显示字体类型

Markdown语法

<font face="黑体">黑体</font>
<font face="宋体">宋体</font>
<font face="仿宋">仿宋</font>
<font face="幼圆">幼圆</font>
<font face="楷书">楷书</font>
<font face="华文行楷">华文行楷</font>
<font face="华文隶书">华文隶书</font>
<font face="华文新魏">华文新魏</font>
<font face="华文彩云">华文彩云</font>
<font face="华文琥珀">华文琥珀</font>

效果如下：

黑体
宋体
仿宋
幼圆
楷书
华文行楷
华文隶书
华文新魏
华文彩云
华文琥珀

四、字体加粗

用**包含一段文本就是粗体的语法。

Markdown语法

**加粗**

效果如下：

加粗

也可以使用编辑器里的快捷键，如下快捷键即可快速粗体：

粗体：Ctrl+B

五、字体斜体

用*包含一段文本就是斜体的语法。

Markdown语法

*斜体*

效果如下：

斜体

也可以使用编辑器里的快捷键，如下快捷键即可快速斜体：

斜体：Ctrl+I

六、下划线

用<u>标签包含一段文本就是下划线的语法。

Markdown语法

<u>文本</u>

效果如下：

文本

注意：

• Markdown自身没有实现下划线，但它是HTML的子集，实现了标签
• CSDN的锚和链接是没有下划线的、只是颜色高亮，一般建议加上下划线，会更明确是链接、可点击的；
• 一般文本建议不要加下划线，容易误会成链接

七、删除线

用~~包含一段文本就是删除线的语法。

Markdown语法

~~文本~~

效果如下：

文本

八、高亮

高亮的定义：通过字体的颜色或背景色，突出某内容。

有以下几种情况：

代码高亮

这是最普遍支持的高亮。又分为行内代码和代码块两种：

行内代码高亮

语法如下：

`print $0` 

效果如下：

print $0

行内代码中，若需要 ` 符号，可使用 `` ` `` 实现

注意：

• 两侧需有空格或制表符
• 以此类推，若要实现 `` ，可通过 ``` `` ``` 实现

代码块高亮

语法如下：

## 注意：下面是py增强代码块的特性，指代码块是python语法，不同的markdown编辑器对此支持可能会有不同
```py
print $0
```

效果如下：

print $0

代码块中，也支持出现 `。与行内代码类似，代码中连续的 `，不能超过代码块最外侧的 ` 数量。例如，要打印 ``` （3个），代码块需使用 ````（4个）声明

普通文本高亮

CommonMark中并未定义普通文本高亮。

可通过HTML标签<mark>实现：

语法如下：

<mark>文本高亮</mark>

效果如下：

文本高亮

注意：不同编辑器对<mark>标签的样式实现可能会略有不同

CSDN中支持通过==文本高亮==，实现文本高亮

Markdown语法

==文本高亮==

效果如下：

文本高亮

九、下标

用~包含一段文本就是下标的语法。

Markdown语法

文本~下标~

效果如下：

文本_下标

十、上标

用^包含一段文本就是上标的语法。

Markdown语法

文本^上标^

效果如下：

文本^上标

十一、混合使用

实现一个颜色为红色、字号为5、字体为华文琥珀的文字样式。

Markdown语法

<b><font size=5 color=red face="华文琥珀">华文琥珀</font></b>

效果如下：

华文琥珀

总结

以上就是文章的全部内容，本文仅仅简单介绍了 Markdown 如何自定义字体样式，而Markdown还有其他丰富的语法，待后续总结后记录和分享。

参考资料

csdn如何修改文字体及颜色
markdown设置字体背景和颜色
CSDN博客写作小技巧【1】：CSDN如何设置字体大小、颜色和字体类型！

今天的分享就到此结束了

欢迎点赞评论关注三连