参考资料

  1. HTML "计算机输出"标记
  2. HTML id 属性在 JavaScript 中的使用
  3. HTML 列表
  4. HTML 符号实体
  5. HTML 内联式
  6. 菜鸟在线HTML编辑
  7. html链接标签详细说明以及案例
  8. html表单标签详细说明以及案例

HTML 字体, 字体颜色 ，字体大小

HTML 字体格式化

基本标签

<font> 标签 (已废弃)

<font face="Arial" color="red" size="4">文本内容</font>

  • face: 设置字体类型

  • color: 设置字体颜色

  • size: 设置字体大小(1-7)

CSS 字体样式

字体类型

<p style="font-family: Arial, sans-serif;">文本内容</p>

  • 可以指定多个字体作为备选

  • 常用字体族: serif, sans-serif, monospace, cursive, fantasy

字体颜色

<p style="color: red;">红色文本</p>
<p style="color: #FF0000;">十六进制红色</p>
<p style="color: rgb(255, 0, 0);">RGB红色</p>
<p style="color: rgba(255, 0, 0, 0.5);">半透明红色</p>

字体大小

<p style="font-size: 16px;">16像素文本</p>
<p style="font-size: 1em;">1em大小</p>
<p style="font-size: 100%;">100%大小</p>
<p style="font-size: large;">预定义大小</p>

  • 单位: px, em, rem, %, pt, vw/vh

  • 预定义值: xx-small, x-small, small, medium, large, x-large, xx-large

CSS 扩展属性

字体粗细

<p style="font-weight: bold;">粗体文本</p>
<p style="font-weight: 700;">数值粗体</p>

  • 值: normal, bold, bolder, lighter, 100-900

字体样式

<p style="font-style: italic;">斜体文本</p>
<p style="font-style: oblique;">倾斜文本</p>

文本装饰

<p style="text-decoration: underline;">下划线</p>
<p style="text-decoration: line-through;">删除线</p>
<p style="text-decoration: overline;">上划线</p>

行高

<p style="line-height: 1.5;">1.5倍行距</p>

字母间距

<p style="letter-spacing: 2px;">字母间距</p>

文本阴影

<p style="text-shadow: 2px 2px 4px #000000;">阴影效果</p>

实例

<!DOCTYPE html>
<html>
<head>
    <style>
        .styled-text {
            font-family: 'Arial', sans-serif;
            color: #3366FF;
            font-size: 18px;
            font-weight: bold;
            text-decoration: underline;
            line-height: 1.6;
            letter-spacing: 1px;
        }
    </style>
</head>
<body>
    <p class="styled-text">这是一个样式化的文本示例</p>
</body>
</html>
TAG：标签类型颜色字体大小样式文本格式化基本常用单位

AIGEO优化摘要

AI可读摘要：HTML 字体格式化基本标签font 标签 (已废弃)face: 设置字体类型color: 设置字体颜色size: 设置字体大小(1-7)CSS 字体样式字体类型可以指定多个字体作为备选常用字体族: serif, sans-serif, monospace, cursive, fantasy字体颜色字体大小单位: px, em, rem, %, pt, vw...
常见问题：
HTML 字体, 字体颜色 ，字体大小主要讲了什么？

HTML 字体格式化基本标签font 标签 (已废弃)face: 设置字体类型color: 设置字体颜色size: 设置字体大小(1-7)CSS 字体样式字体类型可以指定多个字体作为备选常用字体族: serif, sans-serif, monospace, cursive, fantasy字体颜色字体大小单位: px, em, rem, %, pt, vw...

HTML 字体, 字体颜色 ，字体大小适合哪些人参考？

适合正在了解文章信息、进行对比筛选，或希望快速获得结论的用户参考。

阅读HTML 字体, 字体颜色 ，字体大小时应重点看哪些内容？

建议重点关注标题、摘要、正文说明、图片资料和更新时间。

AIGEO评分：85/100
  • 建议补充封面或内容图片。
作者：王壹杰
时间：2025-04-24 08:27:07
来源：https://html.ciilii.com/