CSS 字体属性是用于定义 HTML 元素的文本字体样式的。它包括字体家族、字体大小、字体粗细、字体样式和字体变体等属性。本文将详细介绍 CSS 字体属性的使用方式和常见效果样例。

1. 字体家族 (font-family)

字体家族属性用于指定 HTML 元素的文本所使用的字体系列。可以设置多个字体，以便在不同情况下使用不同字体。

```css

p {

font-family: Arial

sans-serif;

}

```

上述例子将 `

` 元素的字体设置为 Arial，如果 Arial 不可用，则会使用默认的 sans-serif 字体。

2. 字体大小 (font-size)

字体大小属性用于设置文本的大小。可以使用*或相对的单位来指定字体大小。

```css

h1 {

font-size: 24px;

}

```

上述例子将 `

` 元素的字体大小设置为 24 像素。

 

3. 字体粗细 (font-weight)

字体粗细属性用于设置文本的粗细程度。可以设置为普通字体 (normal)、粗体 (bold) 或者带有数字值来指定字体的相对粗细程度。

 

```css

h1 {

font-weight: bold;

}

```

 

上述例子将 `

` 元素的字体设置为粗体。

 

4. 字体样式 (font-style)

字体样式属性用于设置文本的样式，可以设置为斜体 (italic) 或者正常 (normal)。

 

```css

em {

font-style: italic;

}

```

 

上述例子将 `` 元素的字体设置为斜体。

 

5. 字体变体 (font-variant)

字体变体属性用于设置小型大写字母，可以设置为正常 (normal) 或者小型大写字母 (small-caps)。

 

```css

p {

font-variant: small-caps;

}

```

 

上述例子将 `

` 元素的字体设置为小型大写字母。

 

6. 文本修饰 (text-decoration)

文本修饰属性用于设置文本的修饰线，可以设置为下划线 (underline)、上划线 (overline)、中划线 (line-through) 或者无修饰线 (none)。

 

```css

a {

text-decoration: underline;

}

```

 

上述例子将 `` 元素的文本设置为带有下划线的修饰线。

 

7. 文本转换 (text-transform)

文本转换属性用于设置文本的大小写转换方式，可以设置为大写 (uppercase)、小写 (lowercase) 或者首字母大写 (capitalize)。

 

```css

span {

text-transform: uppercase;

}

```

 

上述例子将 `` 元素的文本转换为大写。

 

8. 文本阴影 (text-shadow)

文本阴影属性用于设置文本的阴影效果，可以添加水平偏移量、垂直偏移量、模糊半径和阴影颜色。

 

```css

h1 {

text-shadow: 2px 2px 4px #000000;

}

```

 

上述例子将 `

` 元素的文本添加了一个 2 像素水平和垂直偏移量的黑色阴影。

 

以上是一些常见的 CSS 字体属性的介绍和使用方式。通过这些属性的组合使用，可以创建出各种各样的文本效果，使网页更加丰富和有吸引力。