Web 前端 HTML5 & CSS3 字体

1. 字体相关的样式

1.1 颜色

字体的颜色可以通过 color 属性来设置，color 属性的值可以是十六进制颜色值、RGB 颜色值、RGBA 颜色值或颜色名称。

例如：

p {
  color: #ff0000;
}

这段代码将段落文字的颜色设置为红色。

1.2 大小

字体的磅值通过font-size属性进行设定。

1.3 字族

字体的磅值通过font-family属性进行设定。

p {
  font-family: "微软雅黑", "宋体", sans-serif;
}

这段代码将段落文字的字体设置为微软雅黑，如果微软雅黑字体不存在，则使用宋体字体，如果宋体字体也不存在，则使用无衬线字体。

1.4 行高

行高通过line-height属性进行设置。

p {
  line-height: 1.5em;
}

这段代码将段落文字的行高设置为当前字体大小的 1.5 倍。

1.5 字间距

字间距通过letter-spacing属性进行设置。

p {
  letter-spacing: 0.1em;
}

这段代码将段落文字的字间距设置为 0.1 个 em。

2. 文本样式

2.1 加粗

加粗文本可以通过 font-weight 属性来设置，font-weight 属性的值可以是 normal、bold、bolder 和 lighter。

p {
  font-weight: bold;
}

这段代码将段落文字加粗。

2.2 斜体

斜体文本可以通过 font-style 属性来设置，font-style 属性的值可以是 normal 和 italic。

p {
  font-style: italic;
}

这段代码将段落文字设置为斜体。

2.3 下划线

下划线文本可以通过 text-decoration 属性来设置，text-decoration 属性的值可以是 none、underline、overline 和 line-through。

p {
  text-decoration: underline;
}

这段代码将段落文字添加下划线。

3. 特殊效果

3.1 阴影

文字阴影可以通过 text-shadow 属性来设置，text-shadow 属性的值可以是一个或多个阴影。

每个阴影由以下几个值组成：

• 水平偏移量
• 垂直偏移量
• 模糊半径
• 颜色

例如：

p {
  text-shadow: 2px 2px 5px #ff0000;
}

这段代码将段落文字添加一个红色的阴影，阴影的水平偏移量为 2 个像素，垂直偏移量为 2 个像素，模糊半径为 5 个像素。

3.2 发光

文字发光可以通过 text-glow 属性来设置，text-glow 属性的值可以是一个或多个发光。

每个发光由以下几个值组成：

• 水平偏移量
• 垂直偏移量
• 模糊半径
• 颜色

例如：

p {
  text-glow: 2px 2px 5px #ff0000;
}

这段代码将段落文字添加一个红色的发光，发光的水平偏移量为 2 个像素，垂直偏移量为 2 个像素，模糊半径为 5 个像素。

3.3 变形

文字变形可以通过 text-transform 属性来设置，text-transform 属性的值可以是 none、capitalize、uppercase 和 lowercase。

p {
  text-transform: uppercase;
}

这段代码将段落文字全部转换为大写。