CSS 字体修饰属性

前言

---

字体修饰属性

属性	说明
font-family	指定文本显示字体
font-size	设置字体的大小
font-weight	设置字体的粗细程度
font-style	设置字体的倾斜样式
text-decoration	给文本添加装饰线
text-indent	设置文本的缩进
text-align	设置文本的对齐方式
line-height	设置行高
color	设置文本的颜色
font	一次性设置多个属性

---

字体族

可以使用font-family来设置字体族（即字体的类型）以指定文本显示的字体。应用于文本的字体系列。可以通过逗号分隔指定多个字体名称，以便在字体不可用时使用备用字体。

语法：

font-family:value;

value可以是一个字体名称，也可以是一个由字体名称组成的列表。在列表中，你可以按照优先级从高到低的顺序列出多个备选字体名称，以便浏览器根据字体是否可用选择合适的字体进行显示。

示例：

p {
    font-family: "Arial", sans-serif;
}

上述样式规则将选择所有

标签，并将其字体设置为Arial，如果Arial不可用，则可以使用sans-serif作为备用字体。

需要注意以下几点：

1. 如果字体名称包含空格或非字母数字字符，需使用引号将其括起来，如 "Times New Roman"。
2. 如果字体名称不可用或不存在，浏览器会按照设置的顺序尝试使用后面的备选字体。
3. 为了提高兼容性和跨平台一致性，建议指定通用字体族作为备选字体，例如 serif、sans-serif、monospace 等。

---

字体大小

可以使用font-size属性来设置字体的大小。

语法：

font-size: value;

value可以是绝对长度（如像素、英寸） 、相对长度（如em、rem）或相对于父元素字体大小的百分比。

示例：

h1 {
    font-size: 24px;
}

上述样式规则将选择所有

标签，并将它们的字体大小设置为24像素。

需要注意以下几点：

1. 字体大小的取值可以是绝对长度、相对长度或相对于父元素字体大小的百分比。
2. 相对长度单位（如 em、rem）和百分比大小都是相对于父元素的字体大小进行计算的。
3. 不同的浏览器和设备可能会对字体大小的渲染有细微差异，因此建议在设计和开发时进行适当的测试和调整。

---

字体粗细

可以使用font-weight属性来设置字体的粗细程度。

语法：

font-weight: normal | bold | bolder | lighter | number;

• normal：默认值，表示正常字体。
• bold：加粗字体。
• bolder：更粗的字体（相对于父元素） 。
• lighter：更细的字体（相对于父元素）。
• number：可以使用数值定义字体的粗细程度。常用的数值有100、200、300、400（相当于normal）、500、600、700（相当于bold）、800和900。

示例：

strong {
    font-weight: bold;  /* 加粗字体 */
}

上述样式规则将选择所有标签，并将它们的字体设为粗体。

需要注意的是，字体的可以粗细程度取决于所使用的字体和操作系统。并不是所有的字体都支持所有粗细程度，而且在不同浏览器和操作系统下，字体的粗细显示效果可能会有所差异。

---

字体倾斜

可以使用font-style属性来设置字体的倾斜样式。

语法：

font-style: value;

value可以是以下常用取值：

• normal：默认值，表示不进行倾斜处理。
• italic：使字体以倾斜显示。
• oblique：使字体以倾斜显示。 

示例：

em {
    font-style:italic;
}

上述样式规则将对所有标签内文本应用斜体样式。

需要注意以下几点：

1. 并非所有字体都支持斜体或倾斜显示，具体效果取决于所使用的字体和操作系统。
2. 如果指定的字体样式不可用，则浏览器会按照设备的默认方式显示文本。
3. 可以通过组合使用字体族、字体大小以及其他 CSS 属性来实现更精确的文本样式控制。

---

装饰线

可以使用text-decoration属性来添加装饰线到文本中。

语法：

text-decoration: value;

value可以是以下常用的取值：

• none：默认值，表示不添加任何装饰线。
• underline：给文本添加下划线。
• overline：给文本添加上划线。
• line-through：给文本添加删除线。

示例：

a {
    text-decoration: underline;
}

上述样式规则将选择所有标签，并给它们添加下划线。

需要注意以下几点：

• 并非所有字体都支持所有的装饰线样式，具体效果取决于所使用的字体和操作系统。
• 可以通过组合使用 text-decoration 和其他 CSS 属性来实现更精确的文本装饰效果，如改变线条颜色、样式等。

---

文本缩进

可以使用text-indent属性来设置文本的缩进。该属性用于指定元素内文本段落第一行相对于其左边缘的偏移量。

语法：

text-indent: value;

value可以是以下常用取值：

• ：指定一个具体的长度值，如像素（px）、英寸（in）、厘米（cm）等。例如，text-indent: 20px; 将文字缩进20像素。
• %：指定一个相对于包含块宽度的百分比值。例如，text-indent: 50%; 将文字缩进到包含块宽度的一半处。
• inherit：从父元素继承text-indent的值。

示例：

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

上述样式规则将对所有的

标签中的文本段落应用缩进，使每个段落的第一行向右缩进2个字符宽度。

blockquote {
    text-indent: 20px;
}

上述样式规则将对所有

标签应用缩进，使每个块引用的第一行向右缩进20像素。

需要注意以下几点：

• text-indent 属性应用于块级元素，如

  、

  等，默认情况下不适用于行内元素。
• 如果父元素指定了 text-indent，子元素也会继承该属性的值，除非子元素显式覆盖了该属性。

---

文本对齐

可以使用text-align属性来设置文本的对齐方式。该属性用于指定文本相对于其容器的水平对齐方式。

语法：

text-align: left | right | center | justify;

• left： 左对齐，文本与容器左边缘对齐。
• right：右对齐，文本与容器右边缘对齐。
• center：居中对齐，文本只在容器内水平居中对齐。
• justify：两段对齐，文本在容器内两端对齐，行末如果需要会自动调整字间距。

示例：

p {
    text-align: left;  /* 左对齐 */
}

上述样式规则将对所有

标签中的文本应用左对齐。

需要注意的是，text-align属性仅影响行内文本元素和一些块级元素（如段落、标题）。而对于一些块级盒子元素，默认情况下会填充整个父容器。所以对其使用text-align属性并不会产生明显效果。

---

行高

可以使用line-height属性来设置行高，即行与行之间的垂直间距。行高可以影响文本在行内的垂直对齐方式和间距。

语法：

line-height: normal | number | lenght | initial | inherit;

• normal：默认值，表示使用默认行高。
• number：可以使用数值定义行高，数值相对于当前元素的字体大小。例如，1.5表示行高为字体的1.5倍。
• lenght：使用固定长度（如像素）定义行高。
• initial：恢复为默认值。
• inherit：继承父元素的行高。

示例：

h1 {
    line-height: 1.5;   /* 行高为字体大小的1.5倍 */
}

上述样式规则将对所有

标签中的文本应用行高为字体大小的1.5倍。

需要注意的是，行高的取值可以是相对值（如倍数）或绝对值（如像素），而具体的展现效果会受到字体、文本内容和行高设置所在的上下文等多种因素的影响。选择合适的行高可以使文本更易读、整齐美观，同时也要避免行间距过大或过小而影响阅读体验。

---

字体颜色

可以使用color属性来设置文本的颜色。

语法：

color: value;

value可以是以下常用取值：

• 颜色名称：如 "red" 表示红色、"blue" 表示蓝色等。
• 十六进制值：如 "#FF0000" 表示红色、"#00FF00" 表示绿色等。每个颜色通道使用两个十六进制数字表示，其中前两位表示红色通道、中间两位表示绿色通道、后两位表示蓝色通道。例如，"#FF0000" 表示红色，其红色通道的值为 255、绿色通道和蓝色通道的值为 0。
• RGB 值：如 "rgb(255, 0, 0)" 表示红色、"rgb(0, 255, 0)" 表示绿色等。每个颜色通道的值介于 0 到 255 之间，分别表示红色、绿色和蓝色的强度。

示例：

p {
    color: red;
}

上述样式规则将对所有

标签内的文本设置红色颜色。

需要注意以下几点：

• CSS 支持多种颜色表示方法，你可以选择适合你的需求和喜好的方式来设置颜色。
• 除了使用 color 属性来设置元素的文本颜色，还可以使用其他 CSS 属性来设置背景色、边框色等。

---

字体复合属性

可以使用字体相关的复合属性来一次性设置多个字体属性，各个属性间用空格隔开。

font：是否倾斜  是否加粗  字号/行高  字体（必须按顺序书写）

示例：

/* 单独写 */
div {
    font-style: italic;
    font-weight: bold;
    font-size: 20px;
    line-height: 1.5;
    font-family: Arial, sans-serif;
}

/* 简写 */
div {
    font: italic bold 20px/1.5 Arial, sans-serif;
}

注意，字号和字体值必须书写，否则font属性不生效。