字体（font）
目录
返回首页
css基础语法
宽度（width）
高度（height）
边距（margin）
内边距（padding）
边框（border）
颜色（color）
字体（font）
文本对齐（text-align）
文本装饰（text-decoration）
行高（line-height）
显示（display）
浮动（float）
定位（position）
边距（margin）
内边距（padding）
边框（border）
背景（background）
透明度（opacity）
动画（animation）
过渡（transition）
伪类选择器
伪元素选择器
Flexbox（弹性盒模型）
Grid（网格布局）
响应式设计属性
# CSS常用属性中的字体（font）字体大小，字体样式，行高知识点 在网页设计中，字体是传达信息的重要元素之一。CSS提供了丰富的属性来控制字体的外观，包括字体大小、字体样式和行高。下面我们将详细介绍这些属性，并提供一些示例代码。 ## 字体大小（font-size） `font-size` 属性定义了文本的大小。它可以是一个具体的数值，也可以是相对值，例如 `em`、`rem`、`%` 或 `px`。 ### 示例代码 ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>字体大小示例</title> <style> .large-font { font-size: 2em; /* 相对于父元素的字体大小 */ } .small-font { font-size: 0.5rem; /* 相对于根元素的字体大小 */ } .percentage-font { font-size: 80%; /* 相对于父元素的字体大小 */ } </style> </head> <body> <p>这是默认的字体大小。</p> <p class="large-font">这是大字体大小。</p> <p class="small-font">这是小字体大小。</p> <p class="percentage-font">这是百分比字体大小。</p> </body> </html> ``` ## 字体样式（font-style） `font-style` 属性定义了字体的样式，可以是 `normal`、`italic`、`oblique`。 ### 示例代码 ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>字体样式示例</title> <style> .italic-font { font-style: italic; /* 斜体 */ } .oblique-font { font-style: oblique; /* 倾斜 */ } </style> </head> <body> <p>这是正常字体样式。</p> <p class="italic-font">这是斜体字体样式。</p> <p class="oblique-font">这是倾斜字体样式。</p> </body> </html> ``` ## 行高（line-height） `line-height` 属性定义了行与行之间的间距。它可以是一个具体的数值，也可以是一个百分比。 ### 示例代码 ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>行高示例</title> <style> .normal-line-height { line-height: normal; /* 默认行高 */ } .larger-line-height { line-height: 1.5; /* 行高为字体大小的1.5倍 */ } .smaller-line-height { line-height: 0.8; /* 行高为字体大小的0.8倍 */ } </style> </head> <body> <p class="normal-line-height">这是默认的行高。</p> <p class="larger-line-height">这是较大的行高。</p> <p class="smaller-line-height">这是较小的行高。</p> </body> </html> ``` 在以上示例中，我们使用了不同的 `font-size`、`font-style` 和 `line-height` 属性来展示它们如何影响文本的外观。通过调整这些属性，你可以创建出多样化的文本样式，以适应不同的设计和内容需求。