写CSDN博客时，调节字体、大小、颜色

左手的ㄟ右手 2024-03-16 10:32 97阅读 0赞

**字体颜色样式系列**

为了突出重点内容，想设置不同颜色，

颜色挑选网址:  
https://blog.csdn.net/wo919191/article/details/84249531

###### face设置字体 ######

文本内容使用font标签包裹，可通过face设置字体，size设置字号，color设置颜色

<font color="#FF8C0" size=3 face="华文楷体">文本内容使用font标签包裹，可通过face设置字体，size设置字号，color设置颜色</font>
    <font face="黑体">我是黑体字</font>
    <font face="微软雅黑">我是微软雅黑</font>
    <font face="STCAIYUN">我是华文彩云</font>
    
       
       
        
       
       
        
         1 
         2 
         3 
         4

实际预览样式如下：  
文本内容使用font标签包裹，可通过face设置字体，size设置字号，color设置颜色  
我是黑体字  
我是微软雅黑  
我是华文彩云

###### color设置颜色 ######

<font color = red>1.文本text 红色</font>
    <font color = blue>2.文本text 蓝色</font>
    <font color = pink>3.文本text 粉红</font>
    <font color = purple>4.文本text 紫色</font>
    <font color = black>5.文本text 黑色</font>
    <font color = Orange>6.文本text 橙色</font>
    <font color = gray>7.文本text 灰色</font>
    <font color = green>8.文本text 绿色</font>
    <font color = #FF0000>8.文本text 红色#FF0000</font>

*  1
 *  2
 *  3
 *  4
 *  5
 *  6
 *  7
 *  8
 *  9
 *  10

实际预览样式如下：  
1.文本text 红色  
2.文本text 蓝色  
3.文本text 粉红  
4.文本text 紫色  
5.文本text 黑色  
6.文本text 橙色  
7.文本text 灰色  
8.文本text 绿色  
8.文本text 红色\#FF0000

###### size设置字号 ######

Size：规定文本的尺寸大小。可能的值：从 1 到 7 的数字，浏览器默认值是 3。

<font size = 1>1.文本text</font>
    <font size = 2>2.文本text</font>
    <font size = 3>3.文本text</font>
    <font size = 4>4.文本text</font>
    <font size = 5>5.文本text</font>
    <font size = 6>6.文本text</font>
    <font size = 7>7.文本text</font>
    <strong>6.加粗文本</strong>
    
     
     
      
     
     
      
       1 
       2 
       3 
       4 
       5 
       6 
       7 
       8

实际预览样式如下：  
1.文本text  
2.文本text  
3.文本text  
4.文本text  
5.文本text  
6.文本text  
7.文本text  
**6.加粗文本**

###### 其他 ######

背景色：

<table> 
 <tbody> 
  <tr> 
   <td>这里是要写入的内容 
    <div> 
     <table> 
      <tbody> 
       <tr> 
        <td>这里是要写入的内容 
         <div> 
          <table> 
           <tbody> 
            <tr> 
             <td>这里是要写入的内容</td> 
            </tr> 
           </tbody> 
          </table> 
         </div> 
         <div> 
          <table> 
           <tbody> 
            <tr> 
             <td>#D1EEEE</td> 
            </tr> 
           </tbody> 
          </table> 
         </div> </td> 
       </tr> 
      </tbody> 
     </table> 
    </div></td> 
  </tr> 
 </tbody> 
</table>

缩进和空格：  
  ：输入一个空格  
  缩进文本

居中：  
方式一：

要居中的文本  
方式二：

要居中的文本

图片，通过width、height控制图片的大小：

![src_http_3A_2F_2Fimg.soogif.com_2Fmini_2FlsOMOZvYhhRPaPtmO393rCPwHKTCTjAk.gif_3Fscope_3D96weixin_refer_http_3A_2F_2Fimg.soogif.com_app_2002_size_f9999_10000_q_a80_n_0_g_0n_fmt_auto_sec_1669191587_t_2d6079b355efbb38b51ce4204163d529][]

![测试图片][20210419174516559.jpg]  
![带尺寸的图片][20210419174516559.jpg]  
![居中的图片][20210419174516559.jpg_pic_center]  
![居中且带尺寸的图片][20210419174516559.jpg_pic_center]

###### 空白行 ######

虽然说markdown能回车换行，但是没办法做到n个空白行，而且。换行的办法就比较多了，因为别忘了，markdown是支持HTML标签的：  
1、使用块标签，撑开一行，如p、div

<p></p>
    或
    <div></div>
    
     
     
      
     
     
      
       1 
       2 
       3

或

2、简单点的方法，就直接使用 br 标签

内容1<br/><br/>内容2
    
     
     
      
     
     
      
       1

内容1  
  
内容2

*斜体文本* _斜体文本_
    **加粗文本**  __加粗文本__
    ==标记文本==
    ~~删除文本~~
    <u>文本</u>
    文本^上标^
    文本~下标~
    <small>小号字体</small>
    <big>大号字体</big>
    H~2~O is是液体
    2^10^ 运算结果是 1024
    > 引用文本
    
     
     
      
     
     
      
       1 
       2 
       3 
       4 
       5 
       6 
       7 
       8 
       9 
       10 
       11 
       12

*斜体文本* *斜体文本*  
**加粗文本** **加粗文本**  
标记文本  
删除文本  
文本  
文本上标  
文本下标  
小号字体  
大号字体  
H2O is是液体  
210 运算结果是 1024

> 引用文本

————————————————  
参照–  
原文链接：https://blog.csdn.net/liu918458630/article/details/122473750

[src_http_3A_2F_2Fimg.soogif.com_2Fmini_2FlsOMOZvYhhRPaPtmO393rCPwHKTCTjAk.gif_3Fscope_3D96weixin_refer_http_3A_2F_2Fimg.soogif.com_app_2002_size_f9999_10000_q_a80_n_0_g_0n_fmt_auto_sec_1669191587_t_2d6079b355efbb38b51ce4204163d529]: https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.soogif.com%2Fmini%2FlsOMOZvYhhRPaPtmO393rCPwHKTCTjAk.gif%3Fscope%3D96weixin&refer=http%3A%2F%2Fimg.soogif.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1669191587&t=2d6079b355efbb38b51ce4204163d529
[20210419174516559.jpg]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/d4cac117ae8e4949b9b142acf7e78381.png
[20210419174516559.jpg_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/d4cac117ae8e4949b9b142acf7e78381.png#pic_center