CSS文本与字体样式

字体家族、大小、粗细

字体家族

font-family属性

所谓字体家族，就是我们常说的字体，比如常用的方正小标宋简体等等。

如果我们想要设置网页中某个HTML元素下的文本，只需要在对应的选择器中设置font-family:对应字体即可：

*{
	font-family:方正楷体;
}

p{
    font-family:方正小标宋简体，方正楷体， sans-serif;
}

/*像是在第二种写法这样，可以在font-family后面依次写多个字体，每种字体间以‘,’分隔，能够使得当前面的字体无法正常使用时，浏览器自动依次渲染后面的字体直到发现能够正常使用的字体或者到最后使用默认字体*/

可以使用的字体

可以使用的字体有这几种：系统安装的字体，web安全字体，web在线字体，自定义字体

• 系统安装的字体：

  不同的系统查看方式不同，对于Windows系统，可以在C:\Windows\Fonts文件夹下查看

• web安全字体：
  web安全字体指的是绝大部分操作系统都安装的字体，可以在大部分设备上正常显示

• web字体：

​ web字体通常是指通过网络加载和使用的字体。常见的提供web字体服务的网站有Google fonts和Abode fonts。

​ 通过<link>标签引入并使用

• 自定义字体：
  web支持使用自定义字体，通过使用 @font-face 规则可以引入自定义字体。

  创建自定义字体步骤：

  • 首先需要准备好字体文件。
  • 使用@font-face规则引入自定义字体。

  @font-face{
  	font-family:'你自定义的，打算用于HTML中充当font-family的名字'
      src:url('你存放字体文件的路径')format('你引入的字体文件格式')
      /*注意,'.ttf'后缀的字体格式是truetype而非ttf*/
      /*src属性可以写多个，浏览器会按顺序查找直到找到并使用首个可以正常使用的文件*/
      font-weight:normal;/*定义字体粗细，normal表示标准粗细，可以使用bold或特定的数字值*/
      font-style:normal;
      /*定义字体样式，normal表示正常字体样式，而不是斜体italic或者倾斜oblique*/
  }
  

  字体大小

  文本字体大小通过font-size属性设置，常用单位包括px（像素）、em、rem、% 和 vw 等。

  常见单位

  px（像素）: 绝对单位，表示屏幕上的一个点，比较常用，但在响应式设计中灵活性较差。

  em 和 rem: 相对单位，em 基于父元素的字体大小，rem 基于根元素（通常是 html）的字体大小。它们适合响应式设计。

  %: 相对于父元素的字体大小，100% 等同于父元素的 font-size。

  vw 和 vh: 基于视口宽度和高度的相对单位，vw 是视口宽度的 1%，vh 是视口高度的 1%。

  使用大小关键字

  small, medium, large: 使用这些关键字可以设置预定义的字体大小。

  smaller, larger: 相对于父元素字体大小的调整。

  字体粗细

  font-weight 属性用于定义文本的粗细。

  这个属性的属性值可以使用数字表示具体粗细，数字值包括100到900,其中，400为正常字体，700为粗体。

  使用关键字

  normal: 正常字体粗细，等同于 400

  bold: 粗体，等同于 700。

  **bolder **：比父元素字体更粗。

  lighter：比父元素字体更细。

文本颜色与背景色

​ 文本颜色通过属性color设置，属性值支持颜色名称、十六进制值、RGB值、RGBA值、HSL值和HSLA值。

​ 背景色 通过属性background-color设置，属性值支持与color相同。

除此之外，color 和 background-color 属性可以使用 inherit 值，表示继承父元素的颜色设置。

文本对齐与行高

文本对齐

​ text-align 属性用于设置文本在其容器内的水平对齐方式。它适用于块级元素中的文本和行内元素的内容。

​ 常见值有：left（左对齐文本、默认），right（右对齐文本），center(居中对齐文本)，justify(两端对齐文本)

行高

​ line-height 属性用于设置文本行与行之间的垂直间距，即行高。调整行高有助于提升文本的可读性和视觉效果。

​ 行高的属性值可以使用数字值(表示相对于font-size的倍数)，百分比(相对于元素font-size的百分比)，绝对值（使用具体单位，比如px或em）以及**normal**（默认行高，通常为字体大小的 1.2 至 1.4 倍，具体取决于浏览器）。

文本装饰（下划线、删除线等）

text-decoration 属性

​ text-decoration 属性是控制文本装饰效果的主要属性。它的值包括none（无任何装饰，常用于移除默认样式，比如链接的下划线），underline（添加下划线），overline（添加上划线），line-through（添加删除线），underline overline（同时添加上划线和下划线）。

text-decoration-color 属性

​ text-decoration-color 用于设置文本装饰线（下划线、删除线等）的颜色。颜色值支持前文提到的那些。

text-decoration-style 属性

​ text-decoration-style 用于设置文本装饰线的样式，提供了几种不同的线型选择。

​ 譬如： solid：实线（默认值）

​ double：双实线。

​ dotted：点线。

​ dashed：虚线。

​ wavy：波浪线。

text-decoration-thickness 属性

​ text-decoration-thickness 用于设置装饰线的粗细。

组合使用 text-decoration 属性

​ text-decoration支持组合简写：

p{
     text-decoration: underline wavy red;
}

​ 这段代码将文本装饰设置为红色波浪线下划线。

其他属性

​ text-decoration-skip-ink: none: 确保下划线不会跳过字符下缘。

字符间距与单词间距

​ letter-spacing 属性用于控制文本中字符之间的间距。常用单位为px或em。

​ word-spacing 属性用于控制文本中单词之间的间距。

​