参考资料

  1. HTML 内部样式表
  2. HTML 段落
  3. HTML 内联元素
  4. HTML 外部样式
  5. HTML 内联 元素
  6. 禁用开发者工具的多种方法
  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：标签类型颜色字体大小样式文本格式化基本常用单位