字体、文本样式字体样式（font-size、font-family、font-weight、font-style、fon

「这是我参与2022首次更文挑战的第2天，活动详情查看：2022首次更文挑战」

一、字体与文本样式

1-1、字体样式

主要包括：font-size（字体大小）、font-weight（字体粗细）、font-style（字体样式）、font-family（字体系列）、font（字体样式复合写法）

1-2、文本样式

1-2-1、text-indent使用场景

一般情况下，在实际开发中，会把网站的logo图片放到h1标签中（便于搜索引擎优化）不过，搜索引擎只能识别文字，无法识别图片，解决方案是：

设置h1元素的宽高与logo宽高相同
将h1的背景图片设为logo图片
使用text-indent: -9999px;（一个足够大的像素值）将h1中的文字内容隐藏
设置为-9999px是因为常见的计算机屏幕宽度有1024px与1366px，设置-9999px以保证文字缩进足够多

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>text-indent使用场景</title>
    <style>
      h1 {
        width: 300px;
        height: 300px;
        background-image: url(img/111.jpeg);
        text-indent: -9999px;
      }
    </style>
</head>
<body>
  <h1>CSS进阶</h1>
</body>
</html>

1-2-2、text-align水平居中相关

扩展：有关水平居中（对比text-align:center与margin: 0 auto;）

text-align: center;

可让文本、display为inline和inline-box的元素水平居中
为元素所在的父元素设置

margin: 0 auto;

可让固定宽度的块级元素水平居中（不写宽度，块级标签默认占满父级盒子）
为当前标签自身设置
只需要保证左右间距auto即可，上下间距可以随意，不一定非要是0px

1-3、line-height行高

作用：控制一行的上下行间距
行高 = 上间距 + 文本高度（字体大小） + 下间距
取值：

数字+px
百分比
em
倍数（当前标签的font-size的倍数）

应用：

让单行文本垂直居中可以设置：line-height: 文字父元素高度
网页精准布局时，会设置line-height:1;取消上下间距

行高与font连写注意点：

如果同时设置了行高和font连写形式，注意覆盖问题，将单独的样式写在下面
font连写形式：style weight size/line-height family;（只能省略style与weight，省略了即相当于设置了默认值）
- 如：font: italic bold 14px/1.5 Arail, "微软雅黑";
- 如: font: 14px/1.5 Arail, "微软雅黑";

关于不同取值的影响：

line-height取值是百分比或em时：
- 当line-height取值为百分比或em时，line-height=（当前元素的font-size）*百分比/em
- 如果子元素未定义line-height，那么会继承父元素计算后的line-height的像素值而不是百分比/em

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>line-height单位为百分比或em</title>
    <style>
      #father {
        font-size: 30px;
        /*30px * 150% = 45px*/
        line-height: 150%;
        background-color: hotpink;
      }
      #son {
        font-size: 20px;
        /*	如果子元素未定义line-height 那么会继承父元素的line-height的像素值
        		即：30*150% = 45px
        		line-height为em时也一样继承的是通过父元素当前字体大小计算好的line-height的像素值
        */
        background-color: lightblue;
      }
    </style>
  </head>
  <body>
    <div id="father">
      我是父元素
      <div id="son">我是子元素</div>
    </div>
  </body>
</html>

line-height为单位数字时：
- line-height=（当前元素font-size）*无单位数字
- 如果子元素未定义line-height，将继承父元素line-height的无单位数字，再通过自身的font-size去计算

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>line-height为无单位数字</title>
    <style>
      #father1 {
        font-size: 30px;
        line-height: 1.5;
        background-color: hotpink;
      }
      #son1 {
        font-size: 20px;
        /*子元素未定义line-height，会继承父元素的list-style: height 1.5
        从而计算出line-height = 20px*1.5 = 30px;
        */
        background-color: indigo;
      }
    </style>
  </head>
  <body>
    <div id="father1">
      我是父元素
      <div id="son1">我是子元素</div>
    </div>
  </body>
</html>

1-4、字体和文本颜色样式color

color取值方式有如下几种：

颜色表示方式	表示含义	属性值
关键词	预定义的颜色名	red、green、blue、yellow...
rgb表示法	红绿蓝三原色，取值范围0~255	rgb(0,0,0)、rgb(255,255,255)...
rgba表示法	红绿蓝三原色+透明度，透明度取值范围0~1	rgba(0,0,0,0.3)...IE9开始兼容
十六进制表示法	#开头，将数字转换成十六进制表示	#000000、#ff0000，简写：#000、#f00

rgb常见取值：rgb(255,0,0) 红色、rgb(0,255,0) 绿色、rgb(0,0,255) 蓝色、rgb(0,0,0)黑色、rgb(255,255,255)白色
十六进制表示法相关：
1. 取值范围：两个数字一组，每个数字范围：0~9,a,b,c,d,e,f
2. 省略方法：
- 如果三组中，每组数字都相同，此时可省略，每组只写一个
- 如：#ffaabb可省略为#fab
1. 常见取值：
- #fff 白色
- #000 黑色