一、设置字体格式概述
HTML 提供多种字体格式标签，通过嵌套等方式，能实现网页文字不同字形、颜色、大小等样式，让页面文字呈现更丰富视觉效果 。
二、设置字体的字形与效果
（一）标签说明与代码示例
1. 粗体：<b> 标签
- 作用：让文字显示为粗体效果，突出强调内容 。
- 示例代码
-
<body> <h1>我是标题1</h1> <p>这里可以写一个<b>段落</b>的文字信息</p> </body>
说明：代码中 “段落” 二字会以粗体显示，让其在段落里更醒目 。
2. 斜体：<<i> 标签
- 作用：使文字倾斜，常用来表示外文、技术术语等特殊语义 。
- 示例代码：
<body>
<h1><<i>我是</</i><sup>上标</sup><sub>下标</sub>1</h1>
<p>这里可以写一个<b>段落</b>的<i>文字信息</</i></p>
</body>
说明：“我是”“文字信息” 会显示为斜体，呈现独特样式 。
3. 上标：<sup> 标签
- 作用：让文字显示为上标形式（位置高于正常文字 ），像数学公式里的指数等场景常用 。
- 结合示例：上面代码中
<h1>里的<sup>上标</sup>，“上标” 二字会显示在h1文字的上方，模拟数学指数等上标效果 。
4. 下标：<sub> 标签
- 作用：使文字显示为下标形式（位置低于正常文字 ），化学公式里的元素下标（如 H₂O ）常用 。
- 结合示例：上面代码中
<h1>里的<sub>下标</sub>，“下标” 二字会显示在h1文字的下方，可用于化学公式等场景 。
5. 下划线：<u> 标签
- 作用：给文字添加下划线，起到强调、标识等作用（注意和超链接默认下划线区分开 ）。
- 结合示例：上面代码中
<p>里的<<i>文字信息</</i>，若改成<u>文字信息</u>，“文字信息” 会带下划线显示 。
三、设置字体颜色
一）设置方式说明
通过标签的 style 属性，利用 color 样式设置字体颜色，颜色值有三种常用写法：
- 十六进制：如
#FF0000（红色 ），可参考 “常见颜色码对照表” 。 - RGB 值：格式
rgb(红, 绿, 蓝)，每个颜色通道值范围 0 - 255 ，例rgb(168,168,168)。 - 颜色名：如
blue（蓝色 ）、black（黑色 ）等，部分名称不区分大小写 。
<body>
<h1 style="color:rgb(168,168,168)">我是标题1</h1>
<p style="color:#FF0000">这里写一个段落文字信息</p>
<p style="color:blue">我是第二段内容</p>
<h2 style="background: LightSeaGreen ; color:blue">我是标题2</h2>
</body>
说明：
h1标签用 RGB 值设为浅灰色；p标签分别用十六进制设为红色、颜色名设为蓝色；h2还通过background设背景色为LightSeaGreen，字体颜色为蓝色 。- 多个
style样式值用分号隔开，整体作为字符串写在style属性里 。
四、设置字体大小
（一）设置方式说明
借助标签的 style 属性，用 font-size 样式设置字体大小，单位有 pt（磅 ）、cm（厘米 ）、inches（英寸 ）、mm（毫米 ）等 。
（二）示例代码
<body>
<h1 style="font-size:38pt">我是标题1</h1>
<p style="font-size:1cm">我们一起学习Python办公自动化</p>
</body>
说明：
h1标签字体大小设为38pt；p标签字体大小设为1cm。- 不同单位显示效果有差异，可根据需求（如印刷场景用
pt，网页适配场景灵活选 ）测试调整
扫一扫
3158
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
