掌握CSS中的文本格式化属性：字体选择、颜色设置与行高调整
欢迎来到“CSS文本格式化讲座”！
大家好，欢迎来到今天的“CSS文本格式化讲座”！我是你们的讲师，今天我们将一起探讨如何用CSS来美化网页上的文字。无论你是初学者还是有一定经验的开发者，相信今天的课程都会让你有所收获。我们将会深入浅出地讲解三个核心的文本格式化属性：字体选择、颜色设置和行高调整。准备好了吗？让我们开始吧！
1. 字体选择：让你的文字更有个性
在网页设计中，字体的选择至关重要。一个好的字体不仅能提升页面的美观度，还能增强用户的阅读体验。CSS提供了多种方式来选择和控制字体，今天我们主要介绍三种常见的方法。
1.1 使用系统字体
最简单的方式是使用用户设备上已有的系统字体。通过font-family属性，你可以指定一个或多个字体名称，浏览器会按照优先级依次查找这些字体，直到找到可用的为止。如果所有指定的字体都不存在，浏览器将使用默认字体。
p {
font-family: Arial, sans-serif;
}在这个例子中，浏览器会首先尝试使用Arial字体，如果用户设备上没有安装Arial，则会使用其他无衬线字体（如Helvetica），最后 fallback 到系统的默认无衬线字体。
1.2 使用自定义字体（Web Fonts）
如果你想要更独特的字体效果，可以使用自定义字体。通过@font-face规则，你可以将外部字体文件引入到你的项目中。这种方式允许你使用任何你喜欢的字体，而不仅仅局限于系统自带的字体。
@font-face {
font-family: 'MyCustomFont';
src: url('mycustomfont.woff2') format('woff2'),
url('mycustomfont.woff') format('woff');
}
h1 {
font-family: 'MyCustomFont', sans-serif;
}在这里，我们定义了一个名为MyCustomFont的字体，并指定了它的来源文件。src属性支持多种字体格式，如woff2、woff、ttf等。为了确保兼容性，通常会提供多个格式的字体文件。
1.3 使用Google Fonts（或其他字体库）
如果你不想自己托管字体文件，还可以使用像Google Fonts这样的在线字体库。Google Fonts提供了大量的免费字体，而且使用非常方便。你只需要在HTML文档的<head>部分引入相应的字体链接，然后在CSS中引用即可。
<!-- 在HTML中引入Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">body {
font-family: 'Roboto', sans-serif;
}通过这种方式，你可以轻松地为网站添加高质量的字体，而无需担心字体文件的托管问题。
2. 颜色设置：让文字更加生动
文字的颜色直接影响用户的视觉感受。合理的颜色搭配可以让页面更加美观，同时也能够提高可读性和用户体验。CSS提供了多种方式来设置文字颜色。
2.1 使用预定义的颜色名称
最简单的方式是使用CSS预定义的颜色名称。CSS中有140种标准颜色名称，例如red、blue、green等。虽然这些颜色名称非常方便，但它们的数量有限，无法满足复杂的配色需求。
p {
color: blue;
}2.2 使用十六进制颜色值
如果你想更精确地控制颜色，可以使用十六进制颜色值。十六进制颜色由6个字符组成，前两位表示红色通道，中间两位表示绿色通道，最后两位表示蓝色通道。每个通道的取值范围是00到FF。
h1 {
color: #FF5733; /* 橙红色 */
}此外，十六进制颜色值还可以缩写为3个字符的形式，适用于每个通道的两个字符相同的情况。
p {
color: #F00; /* 红色 */
}2.3 使用RGB颜色值
RGB颜色模型通过红、绿、蓝三个通道的组合来表示颜色。每个通道的取值范围是0到255。使用rgb()函数可以更直观地设置颜色。
h2 {
color: rgb(255, 99, 71); /* 橙红色 */
}你还可以使用带有透明度的RGBA颜色值，其中第四个参数表示透明度，取值范围是0到1。
p {
color: rgba(255, 99, 71, 0.5); /* 半透明的橙红色 */
}2.4 使用HSL颜色值
HSL颜色模型基于色相（Hue）、饱和度（Saturation）和亮度（Lightness）来表示颜色。相比RGB，HSL更容易理解和调整。使用hsl()函数可以方便地设置颜色。
h3 {
color: hsl(120, 100%, 50%); /* 绿色 */
}同样，HSL也支持带有透明度的hsla()函数。
p {
color: hsla(120, 100%, 50%, 0.7); /* 半透明的绿色 */
}3. 行高调整：提升文本的可读性
行高（line-height）是指文本行与行之间的间距。合理的行高可以显著提升文本的可读性，尤其是在长篇幅的文章中。CSS提供了多种方式来设置行高。
3.1 使用数值单位
最直接的方式是使用具体的数值单位来设置行高。常用的单位包括像素（px）、百分比（%）和em。
p {
line-height: 1.5em; /* 1.5倍的字体大小 */
}在这个例子中，line-height被设置为字体大小的1.5倍。em是一个相对单位，它相对于当前元素的字体大小进行计算。因此，如果字体大小发生变化，行高也会相应调整。
3.2 使用无单位数值
除了使用具体的单位，你还可以使用无单位的数值来设置行高。无单位的数值表示行高相对于字体大小的比例。这种方式更加灵活，因为它是纯比例计算，不会受到父元素的影响。
p {
line-height: 1.6; /* 1.6倍的字体大小 */
}3.3 自动行高
如果你不确定应该使用多大的行高，或者希望浏览器根据内容自动调整行高，可以使用normal关键字。normal是行高的默认值，通常相当于字体大小的1.2倍左右。
p {
line-height: normal;
}3.4 行高与垂直对齐
有时候，行高不仅影响行与行之间的间距，还会影响文本在行框中的垂直对齐方式。通过调整行高，你可以控制文本在行框中的位置。例如，较大的行高会使文本在行框中居中显示，而较小的行高则会使文本靠近顶部或底部。
span {
line-height: 2; /* 大行高使文本居中 */
}总结
今天的讲座到这里就接近尾声了！我们学习了如何通过CSS来选择字体、设置颜色以及调整行高。这些看似简单的属性，实际上对网页的视觉效果和用户体验有着重要的影响。希望今天的课程能够帮助你在未来的项目中更好地运用这些技术。
如果你还有任何疑问，或者想要了解更多关于CSS的内容，欢迎随时提问！感谢大家的参与，期待下次再见！ 😊
