字体文本

辉哥大约 11 分钟

CSS 字体文本键值语法

以下为学习过程中的极简提炼笔记，以供重温巩固学习

学习路线&目的

掌握 CSS字体属性、文本属性，熟练运用
掌握通过浏览器反查 CSS元素，熟练运用 CSS 元素制作样式，熟练CV

CSS字体属性

CSS Fonts 字体属性，用于定义字体系列、大小、粗细、和文字样式（如斜体）

字体系列 font-family

CSS 使用 font-family 属性定义文本的字体系列

各种字体之间必须使用英文状态下的逗号隔开
一般情况下,如果有空格隔开的多个单词组成的字体,加引号.
尽量使用系统默认自带字体，保证在任何用户的浏览器中都能正确显示
最常见的几个字体：body {font-family: 'Microsoft YaHei',tahoma,arial,'Hiragino Sans GB'; }

语法格式案例

字体系列

<head>
  <style>
    h2 {
      font-family: '微软雅黑';
    }
    p {
      /* font-family: 'Microsoft YaHei', Arial, Helvetica, sans-serif; */
      font-family: 'Times New Roman', Times, serif;
    }
  </style>
</head>
<body>
  <h2>pink的秘密</h2>
  <p>那一抹众人中最漂亮的颜色,</p>
  <p>优雅,淡然,又那么心中清澈.</p>
  <p>前端总是伴随着困难和犯错,</p>
  <p>静心,坦然,攻克一个又一个.</p>
  <p>拼死也要克服它,</p>
  <p>这是pink的秘密也是老师最终的嘱托.</p>
</body>

字号大小 font-size

CSS 使用 font-size 属性定义文本的字号大小

px（像素）大小是我们网页的最常用的单位
谷歌浏览器默认的文字大小为16px
不同浏览器可能默认显示的字号大小不一致，我们尽量给一个明确值大小，不要默认大小
可以给 body 指定整个页面文字的大小

语法格式案例

字号大小

<head>
  <style>
    body {
      font-size: 16px;
    }
    /* 标题标签比较特殊,需要单独指定文字大小 */
    h2 {
      font-size: 16px;
    }
  </style>
</head>
<body>
  <h2>pink的秘密</h2>
  <p>那一抹众人中最漂亮的颜色,</p>
  <p>优雅,淡然,又那么心中清澈.</p>
  <p>前端总是伴随着困难和犯错,</p>
  <p>静心,坦然,攻克一个又一个.</p>
  <p>拼死也要克服它,</p>
  <p>这是pink的秘密也是老师最终的嘱托.</p>
</body>

字体粗细 font-weight

CSS 使用 font-weight 属性设置文本字体的粗细

学会让加粗标签（比如 h 和 strong 等）不加粗，或者其他标签加粗
实际开发时，我们更喜欢用数字表示粗细

属性值	效果作用
normal	默认值（不加粗）
bold	粗体
100~900	400等同于normal，700等同于bold 注意这个数字后面不加单位

语法格式案例

字体粗细

<head>
  <style>
   .bold {
    /* font-weight: bold; */
    /* 这个700 的后面不要跟单位  等价于 bold 都是加粗的效果 */
    /* 实际开发中,我们跟提倡使用数字 表示加粗或者变细 */
    font-weight: 700;    
  }
  h2 {
    font-weight: 400;   
    /* font-weight: normal;    */
  }
  </style>
</head>
<body>
  <h2>pink的秘密</h2>
  <p>那一抹众人中最漂亮的颜色,</p>
  <p>优雅,淡然,又那么心中清澈.</p>
  <p>前端总是伴随着困难和犯错,</p>
  <p>静心,坦然,攻克一个又一个.</p>
  <p class="bold">拼死也要克服它,</p>
  <p>这是pink的秘密也是老师最终的嘱托.</p>
</body>

字体风格 font-style

CSS 使用 font-style 属性设置文本风格样式

平时我们很少给文字加斜体，反而要给斜体标签（em，i）改为不倾斜字体

属性值	效果作用
normal	默认值（浏览器显示标准的字体样式）
italic	斜体

语法格式案例

字体风格样式

<head>
  <style>
  p {
    font-style: italic;
  }
  em {
    /* 让倾斜的字体不倾斜   就是赶紧脉动回来 */
    font-style: normal;
  }
  </style>
</head>
<body>
  <p>同学,上课时候的你</p>
  <em>下课时候的你</em>
</body>

字体复合属性 font：

CSS 使用 font：复合属性，打包各文本的设置要素

body { font: font-style font-weight font-size/line-height font-family; }

使用 font 属性时，必须按上面语法格式中的顺序书写，不能更换顺序，并且各个属性间以空格隔开
不需要设置的属性可以省略（取默认值），但必须保留 font-size 和 font-family 属性，否则 font 属性将不起作用

属性值	效果作用
normal	默认值（浏览器显示标准的字体样式）
italic	斜体

语法格式案例

字体复合属性

<head>
  <style>
  /* 想要div文字变倾斜 加粗 字号设置为16像素 并且 是微软雅黑 */
  div {
    /* font-style: italic;
    font-weight: 700;
    font-size: 16px;
    font-family: 'Microsoft yahei'; */
    /* ---------------------------- */
    /* 复合属性: 简写的方式  节约代码 */
    /* font: font-style  font-weight  font-size/line-height  font-family; */
    /* font: italic 700 16px 'Microsoft yahei'; */
    font: 20px '黑体';
  }
  </style>
</head>
<body>
  <p>同学,上课时候的你</p>
  <em>下课时候的你</em>
</body>

字体总结

属性值	含义	使用说明
font：	复合属性连写	要按顺序，不能换位置连写时字号和字体必须要设置
font-style	风格样式	默认normal正体，italic斜体
font-weight	粗细	400等同于normal，700等同于bold 注意这个数字后面不加单位
font-size/line-height	字号/行高	需要写单位 px 像素
font-family	字体	按 UI 要求

CSS文本属性

CSS Text 文本属性，用于定义文本的外观，比如文本的颜色、对齐文本、装饰文本、文本缩进、行间距等

文本颜色 color

CSS 使用 color 属性用于定义文本的颜色

开发中最常用的是十六进制

键/属性的定义形式	值的样式
预定义的颜色值 (标准色值)	red、pink、yellow、green、blue等英文标准词
16进制	#FF0000、#EF6600、#ab0ec0、#29D79A
RGB色号	rgb(255,255,0)或rgb(100%,5%,0%)

语法格式案例

文本颜色

<head>
  <style>
    div {
      /* color: deeppink; */
      /* color: #cc00ff; */
      color: rgb(255, 0, 255);
    }
  </style>
</head>
<body>
  <div>听说喜欢pink色的男生,都喜欢男人</div>
</body>

文本对齐 text-align

CSS 使用 text-align 属性用于设置元素内文本内容的水平对齐方式

键值/属性值	定义
left	左对齐（默认值）
right	右对齐
center	居中

语法格式案例

文本对齐

<head>
  <style>
    h1 {
      /* 本质是让h1盒子里面的文字水平居中对齐 */
      /* text-align: center; */
      text-align: right;
    }
  </style>
</head>
<body>
  <h1>居中对齐的标题</h1>
</body>

文本装饰 text-decoration

CSS 使用 text-decoration 属性规定添加到文本的修饰

可以给文本添加下划线、删除线、上划线等

重点记住下划线的添加和删除

键值/属性值	定义	使用场景及频率
none	默认没有装饰线	最常用，用于删除线
underline	下划线	链接`<a>`标签自带下划线，常用
overline	上划线	几乎不用
ling-through	删除线	文字中间的删除线，不常用

语法格式案例

文本划线装饰

<head>
  <style>
    div {
      /* 下划线 */
      /* text-decoration: underline;   */
      /* 删除线 */
      text-decoration: line-through;
      /* 上划线 */
      text-decoration: overline;

    }
    a {
      /* 取消a默认的下划线 */
      text-decoration: none;
      color: #333;
    }
  </style>
</head>
<body>
  <div>粉红色的回忆</div>
  <a href="#">粉红色的回忆</a>
</body>

文本缩进 text-decoration

CSS 使用 text-indent 属性用来指定文本的第一行的缩进，通常是将段落的首行缩进

通过设置该属性，所有元素的第一行都可以缩进一个给定的长度，甚至该长度可以是负值
em 是一个相对单位，就是当前元素（font-size） 1 个文字的大小
如果当前元素没有设置大小，则会按照父元素的 1 个文字大小

语法格式案例

文本缩进

<head>
  <style>
    p {
      font-size: 24px;
      /* 文本的第一行首行缩进 多少距离  */
      /* text-indent: 20px; */
      /* 如果此时写了2em 则是缩进当前元素 2个文字大小的距离  */
      text-indent: 2em;  
    }
  </style>
</head>
<body>
  <p>打开北京、上海与广州的地铁地图，你会看见三张纵横交错的线路网络，这代表了中国最成熟的三套城市轨道交通系统。</p>

  <p> 可即使这样，在北上广生活的人依然少不了对地铁的抱怨，其中谈及最多的问题便是拥挤——对很多人而言，每次挤地铁的过程，都像是一场硬仗。更何况，还都是败仗居多。</p>
  
  <p> 那么，当越来越多的二线甚至三线城市迎接来了自己的地铁，中国哪里的地铁是最拥挤的呢？</p>
</body>

行间距 line-height

CSS 使用 line-height 属性用于设置行间的距离（行高）以控制文字行与行之间的距离

行高/行间距由上间距+文本高度+下间距组成

上间距+文本高度+下间距=行间距

语法格式案例

行间距

<head>
  <style>
    div {
      line-height: 26px;
    }
    p {
      line-height: 25px;
    }
  </style>
</head>
<body>
  <div>中国人</div>
  <p>打开北京、上海与广州的地铁地图，你会看见三张纵横交错的线路网络，这代表了中国最成熟的三套城市轨道交通系统。</p>

  <p> 可即使这样，在北上广生活的人依然少不了对地铁的抱怨，其中谈及最多的问题便是拥挤——对很多人而言，每次挤地铁的过程，都像是一场硬仗。更何况，还都是败仗居多。</p>
        
  <p> 那么，当越来越多的二线甚至三线城市迎接来了自己的地铁，中国哪里的地铁是最拥挤的呢？</p>
</body>

文本属性总结

属性值	含义	使用说明
color	文本颜色	通常使用16进制且使用简写 #fff
text-align	文本对齐	设置文字水平对齐方式
text-indent	文本缩进	通常用于段落首行缩进字符 `text-indent:2em;`
text-decoration	文本修饰	添加下划线 underline 取消下划线 none
line-height	行高	控制行与行之间的距离

显示技巧

CSS 没有给我们提供文字垂直居中的代码，可使用一个小技巧来实现

解决方案: 让文字的行高等于盒子的高度，就可以让文字在当前盒子内垂直居中

简单理解: 行高的上空隙和下空隙把文字挤到中间了，如果行高小于盒子高度，文字会偏上，如果行高大于盒子高度，则文字偏下

语法格式案例

文字垂直居中显示技巧

<head>
  <style>
    div {
      width: 200px;
      height: 40px;
      background-color: pink;
      line-height: 40px;
    }
  </style>
</head>

<body>
  <div>我要居中</div>
</body>

文字居中+元素/标签显示模式转换案例

语法格式案例

元素/标签显示模式转换案例

<head>
  <style>
    /* 1. 把a转换为块级元素 */
    a {
      display: block;
      width: 230px;
      height: 40px;
      background-color: #55585a;
      font-size: 14px;
      color: #fff;
      text-decoration: none;
      text-indent: 2em;
      line-height: 40px;
    }

    /* 2 鼠标经过链接变换背景颜色 */
    a:hover {
      background-color: #ff6700;
    }
  </style>
</head>

<body>
  <a href="#">手机 电话卡</a>
  <a href="#">电视 盒子</a>
  <a href="#">笔记本 平板</a>
  <a href="#">出行 穿戴</a>
  <a href="#">智能 路由器</a>
  <a href="#">健康 儿童</a>
  <a href="#">耳机 音响</a>
</body>