当前位置：首页 > article >正文

css字体样式与文本样式详解

article 2026/5/4 0:26:32

一、CSS字体样式

1. 字体类型（font-family）

2. 字体大小（font-size）

3. 字体粗细（font-weight）

4. 字体风格（font-style）

5. 字体颜色（color）

6. 字体简写属性（font）

7. 综合示例

二、CSS文本样式

1. 文本颜色（color）

2. 文本对齐（text-align）

3. 文本装饰（text-decoration）

4. 文本缩进（text-indent）

5. 文本转换（text-transform）

6. 文本阴影（text-shadow）

7. 行间距（line-height）

8. 字符间距（letter-spacing）

9. 单词间距（word-spacing）

10. 综合示例

一、CSS字体样式

CSS中的字体样式用于定义文本的外观，包括字体类型、大小、粗细、风格和颜色等。

1. 字体类型（`font-family`）

font-family属性用于定义字体类型，可以指定多个字体，浏览器会按顺序查找并使用第一个可用的字体。若所有指定的字体都不可用，则使用浏览器默认字体。

语法：

 font-family: "字体1", "字体2", "字体3", ...;

示例：

 body {font-family: "微软雅黑", "Arial Black", sans-serif;}

在本例中，如果用户的系统中安装了"微软雅黑"，则使用该字体；如果没有，则尝试使用Arial Black；如果都没有，则使用默认的sans-serif字体。

2. 字体大小（`font-size`）

font-size属性用于定义字体大小，常用的单位有px（像素）、em（相对于父元素的字体大小）、rem（相对于根元素的字体大小）等，可以使用关键字（如small、medium、large）或具体的数值（如10px、16px、20px）。

语法：

 font-size: 数值 | inherit | medium | large | larger | x-large | xx-large | small | smaller | x-small | xx-small;

示例：

 h1 {font-size: 2em; /* 使用em单位，相对于父元素的字体大小 */}p {font-size: 16px; /* 使用像素单位 */}

3. 字体粗细（`font-weight`）

font-weight属性用于定义字体的粗细，取值范围为100~900，也可以使用关键字（如normal、lighter、bold、bolder）。

语法：

 font-weight: 100-900 | bold | bolder | lighter | normal;

示例：

 strong {font-weight: bold; /* 使用关键字 */}span {font-weight: 700; /* 使用数字 */}

4. 字体风格（`font-style`）

font-style属性用于定义字体的风格，取值包括normal（正常）、italic（斜体）、oblique（斜体）。

语法：

 font-style: normal | italic | oblique;

示例：

 span {font-style: italic;}

5. 字体颜色（`color`）

color属性用于定义字体的颜色，可以使用关键字（如red）、16进制RGB值（如#03FCA1）、RGB值（如rgb(3, 252, 161)）、RGBA值（如rgba(3, 252, 161, 0.8)）、HSL值（如hsl(120, 100%, 50%)）或HSLA值（如hsla(120, 100%, 50%, 0.8)）等。

语法：

 color: 数值;

示例：

 a {color: #FF0000;}

6. 字体简写属性（`font`）

font属性是一个简写属性，可以同时设置多个字体相关的属性，其顺序为：font-style font-variant font-weight font-size font-family。注意，font-size和font-family是必需的，其他属性可以省略。

语法：

 font: font-style font-variant font-weight font-size font-family;

示例：

 p {font: italic small-caps bold 16px/1.5 "Helvetica Neue", Arial, sans-serif;/* 等同于分别设置这些属性 */}

7. 综合示例

 <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>CSS字体样式</title><style>body {font-family: "微软雅黑", "Arial Black", sans-serif;font-size: 16px;color: #333;}h1 {font-size: 25px;font-weight: bold;color: blue;}p {font-style: italic;}a {color: #FF0000;text-decoration: none;}a:hover {text-decoration: underline;}</style></head><body><h1>CSS字体样式详解</h1><p>这是一个使用了斜体样式的段落。</p><p>This is a paragraph that uses an italicized style.</p><a href="#">这是一个链接</a></body></html>

二、CSS文本样式

CSS的文本样式主要关注文本的布局、装饰和视觉效果。

1. 文本颜色（`color`）

设置文本的颜色，与字体样式中的语法相同。

 a {color: #333; /* 使用十六进制颜色 */}p {color: rgba(0, 0, 0, 0.5); /* 使用RGBA颜色，包含透明度 */}

2. 文本对齐（`text-align`）

设置文本的对齐方式，常用的有left（左对齐）、right（右对齐）、center（居中对齐）、justify（两端对齐）等。

 div {text-align: center; /* 居中对齐 */}

3. 文本装饰（`text-decoration`）

设置文本的装饰效果，如下划线、上划线、贯穿线等，常用值有none（无装饰）、underline（下划线）、overline（上划线）、line-through（贯穿线）等。

 a {text-decoration: none; /* 取消下划线 */}del {text-decoration: line-through; /* 删除线 */}

4. 文本缩进（`text-indent`）

设置文本的首行缩进，可以使用长度单位或百分比。

 p {text-indent: 2em; /* 首行缩进2个字符宽度 */}

5. 文本转换（`text-transform`）

控制文本的大小写转换，常用的值有none（无转换）、capitalize（每个单词的首字母大写）、uppercase（全部大写）、lowercase（全部小写）等。

 p {text-transform: uppercase; /* 全部大写 */}span {text-transform: capitalize; /* 首字母大写 */}

6. 文本阴影（`text-shadow`）

为文本添加阴影效果，可以指定水平偏移、垂直偏移、模糊半径和颜色。

 h1 {text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3); /* 水平偏移、垂直偏移、模糊半径、颜色 */}

7. 行间距（`line-height`）

设置文本行之间的间距，会影响文本的可读性，可以使用数字、长度单位或百分比。

 p {line-height: 1.5; /* 使用数字，表示行高是字体大小的1.5倍 */}

8. 字符间距（`letter-spacing`）

设置字符之间的间距，可以使用正常的长度单位，如px、em等。

 .wide-letters {letter-spacing: 2px;}

9. 单词间距（`word-spacing`）

设置单词之间的间距，同样可以使用正常的长度单位。

 .wide-words {word-spacing: 1em;}

10. 综合示例

 <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>CSS文本样式</title><style>body {font-family: 楷体,"Arial Black", sans-serif;font-size: 16px;line-height: 1.5;}h1 {color: #333;text-align: center;text-transform: uppercase;text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);}p {text-indent: 2em;margin-bottom: 1em;}.uppercase {text-transform: uppercase;}.italic {font-style: italic;}.deleted {text-decoration: line-through;}.wide-letters {letter-spacing: 2px;}</style></head><body><h1>css文本样式详解</h1><p class="uppercase">This is a paragraph with UPPERCASE text.</p><p class="italic">This is a paragraph with <span class="deleted">deleted</span> and <span class="uppercase">uppercase</span> <span class="wide-letters">wide-letter-spaced</span> text.</p></body></html>

一、CSS字体样式

1. 字体类型（font-family）

2. 字体大小（font-size）

3. 字体粗细（font-weight）

4. 字体风格（font-style）

5. 字体颜色（color）

6. 字体简写属性（font）

7. 综合示例

二、CSS文本样式

1. 文本颜色（color）

2. 文本对齐（text-align）

3. 文本装饰（text-decoration）

4. 文本缩进（text-indent）

5. 文本转换（text-transform）

6. 文本阴影（text-shadow）

7. 行间距（line-height）

8. 字符间距（letter-spacing）

9. 单词间距（word-spacing）

10. 综合示例

相关文章：

1. 字体类型（`font-family`）

2. 字体大小（`font-size`）

3. 字体粗细（`font-weight`）

4. 字体风格（`font-style`）

5. 字体颜色（`color`）

6. 字体简写属性（`font`）

1. 文本颜色（`color`）

2. 文本对齐（`text-align`）

3. 文本装饰（`text-decoration`）

4. 文本缩进（`text-indent`）

5. 文本转换（`text-transform`）

6. 文本阴影（`text-shadow`）

7. 行间距（`line-height`）

8. 字符间距（`letter-spacing`）

9. 单词间距（`word-spacing`）