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;
}
```
上述例子将 `
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; } ``` 上述例子将 ` 以上是一些常见的 CSS 字体属性的介绍和使用方式。通过这些属性的组合使用，可以创建出各种各样的文本效果，使网页更加丰富和有吸引力。` 元素的文本添加了一个 2 像素水平和垂直偏移量的黑色阴影。
咨询微信客服
0516-6662 4183
立即获取方案或咨询
top
