参考资料

  1. HTML 用于双向重写
  2. HTML 预期格式文本
  3. HTML id 属性在 JavaScript 中的使用
  4. HTML 外部样式
  5. HTML 自定义列表
  6. html元信息标签详细说明以及案例
  7. HTML 列表
  8. 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：标签类型颜色字体大小样式文本格式化基本常用单位