CSS文本控制总结

1. 字体属性

字体属性定义字体系列、大小、粗细和文本样式（粗细等）

1.1 字体系列

1. font-family

2. 用法：

   p {
   	font-family: '微软雅黑';
   }
   

   1. 其中不建议写中文（不兼容），建议写英文：“Microsoft YaHei”

   2. 可以写多个字体：

      1. 多个字体用逗号进行隔开
      2. 浏览器解析时，从头开始预览看当前系统是否有该字体，有该字体则显示，否则继续向后搜索，直到搜索不到，便使用系统自带字体。
      3. 写多个字体兼容性比较好

   3. 尽量使用系统默认自带字体，保证任何用户的浏览器都能正确显示

   4. 一般情况下，如果有空格隔开的多个组成的字体，加引号。

      font-family: 'Mirosoft Yahei',arial
      

   5. Chrome默认字体为：Mirosoft YaHei

3. 自定义字体

   @font-face {
       font-family: cheng; // 自定义字体名称
       src: local("/js/font/AlexBrush-Refular.ttf");// url("AlexBrush-Refular.ttf")  format("truetype");
   }
   
   
   p {
       color: red;
       font-family: cheng; // 使用自定义字体
   }
   

   1. css3新属性
   2. Firefox Chrome Safari Opera支持.ttf（True Type）和.otf(OpenType)
   3. IE9+仅支持.eot(Embedded OpenType)
   4. Font Squirrel免费字体，但是可以将其他字体转换为.eot字体

1.2 字体大小

1. font-size

2. 单位：

   单位	描述
   字符	xx-small/x-small/small/medium/large/x-large/xx-large
   像素px
   百分数%	相对于父元素的字号的几倍，父元素12px，子元素200%, 表示子元素为父元素两倍大
   em	1em = 100% 等同于百分比 设置宽

3. experice:

   1. 不同浏览器可能默认显示的字号大小不一致，因此最好给个明确的大小
   2. 谷歌浏览器默认的文字大小为16px
   3. 可以通过给body指定整个页面文字的大小，来对整个页面的文字大小进行统一化
   4. 通过body设定指定的文字大小，对标题不起作用，标题文字大小需要单独设置

1.3 字体粗细

1. font-weight

2. 对应关系

   属性值名称	属性值number	解释
   normal	400	正常字体
   bold	700	粗体
   bolder
   lighter（更细的一种字体）

   取值范围 100 - 900

3. 实际开发中使用number设定

4. 应用：

   1. 对标题进行取消加粗：font-weight: 400;
   2. 对加粗标签进行取消加粗
   3. 对没有加粗的标签进行加粗操作

1.4 文字样式（斜体）

1. font-style

2. 对应关系

   属性值	作用
   normal	正常字体
   italic	斜体

3. 应用场景

   1. 将斜体的字体不斜体：比如：em，i

1.5 字体颜色

1. color

2. 可选值

   属性值类型
   预定义字符red, blue, 等
   十六进制的6位字符：#0000ff
   GRB颜色rgb(red,green,blue)值都是0 ~ 255之间
   GRBA透明颜色，rgba(red,green,blue,0~1)，0~1表示透明到不透明，小数可以简写为.x

1.6 行高（行间距）

1. line-height设置行间的距离（行高）。可以控制文字行与行之间的距离

2. 单位：

   单位	作用
   px
   百分制	相对于当前字体大小font-size的百分比
   em	相对于当前字体大小font-size的百分比

4. 其中上间距和下间距一定是相等且为line-height减去文本高度均分之后的值

5. 应用：由于文本一般从盒子左部开始排列，因此只要行高等于盒子高度，则居中于盒子，如果小于盒子高度，则在盒子中上部，如果大于盒子高度，则在盒子中下部。

1.7 文字复合写法

1. font: font-style font-weight font-size[/line-height] font-family
2. font-style font-weight可以互换顺序，但是只能在大小和字体系列之前设置
3. 不需要的可以不设置，但是font-size和font-family不能省略，否则不起作用

2. 文本样式

2.1 大小写转换

1. font-variant用于小写转为大写

   属性值

   属性值	备注
   small-caps	只有小写字母转换为大写，原来大写的字母不变
   all-small-caps	所有的字母均转换为大写

   注：此方式不同于一般的小写转换为大写会发生字体变大的情况，而此方式不会产生这种情况，因此以上两个属性值在需要转换的字母中存在大写字母，转换之后的效果是不一样的。

2. text-transform用于大小写互相转换

   属性值

   属性值	备注
   capitalize	首字母大写
   uppercase	全部大写
   lowercase	全部小写

   注：不同于font-variant，此方式会造成字体的大小变化

2.2 文本线条

1. 通过text-decoration设置文本的线条形式

   属性值

   属性值	备注
   overline	在文本上方
   underline	在文本下方
   line-through	在文本中央
   none	没有线（一般使用该属性去除超链接默认下划线）

2.3 文本阴影

1. 通过text-shadow

2. 语法：

   color offset-x offset-y blur-radius

   或者

   offset-x offset-y blur-radius color

   • color: 阴影的颜色值
   • offset-x/offset-y：水平偏移量/垂直偏移量，以文字为中心的偏移量，默认右为正，如果为负数则位于文字左边
   • blur-radius：模糊半径，值越大，阴影越淡。

3. 至少要写两个数值

4. 可以设置多个阴影，多个阴影参数之间采用逗号连接。

2.4 文本空白处理

1. 使用white-space控制文本空白显示，也即对于空白字符想要原样输出/不输出的控制

2. 语法：

   选项	说明
   pre	保留文字中的所有空白，类似于使用pre标签，包括换行符
   nowrap	禁止文本换行
   pre-wrap	保留空白保留换行符（和使用pre效果一样）
   pre-line	空白合并，保留换行（和不使用white-sapce效果一样）

2.5 文本溢出处理

• 文本溢出断行处理

  overflow-wrap

  • 当一个不能被分割的字符串太长而不能填充其包裹盒子时，为防止其溢出，浏览器是否允许这样的单词中断换行。

  • 属性值

    属性值	说明
    normal	只能在正常单词断点处中断，也即两个单词空白处
    break-word	如果行内没有多余空间，则当前正常的单词被强制拆分换行显示

  • word-wrap原本是微软的一个私有属性，css3被重命名为overflow-wrap。稳定的Chrome, Opera浏览器版本支持这种新语法。

  • 类比：word-break，指定怎么在单词内断行

    • 属性值

      • 属性值	说明
        normal	使用默认的断行规则
        break-all	对于non-CJK(CJK表示中文日文韩文)，可在任意字符间断行
        keep-all	CJK不断行，而non-CJK表现为normal
        break-word	效果等价于break-word:normal 和 overflow-wrap:anywhere之和

    • 与overflow-wrap:break-word的区别

      oveflow-wrap:break-word，只有当一行中单词容不下才断行，而word-break:break-word为预判可能溢出的地方找到确切的位置进行断行处理。

• 文本溢出：多余文本内容显示...

  • 先来看一下overflow-x/overflow-y以及overflow的用法

    overflow-x： 当一个块级元素的内容在水平方向发生溢出的时候，对于溢出内容的处理。

    属性值	说明
    visible	内容不会截断，可以显示在内容盒子外（默认值）
    hidden	内容会被截断，且不会显示滚动条
    scroll	浏览器桌面总是显示滚动条，避免消失/显示照成元素尺寸不一。但是打印机仍然会打印溢出的内容。
    auto	根据情况自适应，如果溢出则显示滚动条，否则不显示

    overflow-y类似，只是方向变为在垂直方向溢出时的处理方式。

    overflow为以上两者属性的简写形式，简写类似于：

    /* On Firefox 61 and 62, this is the same as */
    overflow: overflow-y overflow-x;
    /* But on Firefox 63 and later, it will be */
    overflow: overflow-x overflow-y;
    

    注：

    1. 不同于overflow-wrap和word-break对单词断行处理，而此处为对所有溢出内容的处理。
    2. overflow-x/overflow-y此功能尚在开发，有很严重的兼容性问题，因此可使用overflow避免。

  接着来探讨一下：text-overflow

  text-overflow：用于处理当文本溢出时，向用户显示的溢出信号。

  此属性支队在块级元素溢出的内容有效，且必须要与块级元素内联方向一致（内容在盒子下方溢出，此方式无效），因此文本溢出情况有：

  • 某种原因无法换行，设置了white-space:nowrap
  • 一个单词太长不能安置

  注意：此属性不会强制溢出事件发生，也即除非处理了溢出文本，否则不会强制对其按溢出处理。因此需要搭配overflow:hidden才有效。

  属性值	说明
  clip	在内容区域的极限处截断文本，默认值，其余部分用''代替
  ellipsis	采用...替代，若盒子容不下省略号，则省略号也会被截断
  string	基本上都还没有支持自定义字符串

  因此处理文本溢出多余部分用...显示方式：

  div > p {
      // 事件源
      white-space: nowrap;
      // 溢出事件发生
      overflow: hidden;
      // 溢出文本显示处理
      text-overflow: ellipsis;
  }
  

  注：此方式只只正对于块级元素内且与块级元素内联方向一致的元素内容设置有效。

• 表格文本溢出

  表格文本溢出控制需要为 table 标签定义 table-layout: fixed; css样式，表示列宽是由表格和单元格宽度定义。

  table {
      table-layout: fixed;
  }
  table tbody tr td {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
  }
  

• 多行内容溢出显示...

  -webkit-line-clamp：将快容器的内容限制为指定的行数，此属性在webkit实现，但是仍然有一些问题，可以用line-clamp代替。

  此属性的使用必须在

  display: -webkit-box

  -webkit-box-orient: vertical

  overflow: hidden

  时才有效

  属性值	说明
  none	内容没有限制
  integer	这个值表明内容显示了多少行之后会被限制.必须大于0.

  因此多行内容溢出显示：

  div > p {
      overflow: hidden;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;// 显示两行之后会被限制
  }
  

3 段落控制

3.1 文本对齐

​ 水平对齐

1. text-align控制行内内容相对于父块级元素的对齐方式

2. 属性值

   属性值	说明
   start	如果文本为从左到右，则类似于left，否则类似于right
   end	如果文本从左到右，则类似于right，否则类似于left
   left	行内内容向左侧边对齐，默认值
   center	行内内容居中
   right	行内内容向右侧边对齐
   justify	文字向两侧对齐，最后一行无效
   justify-all	文字向两侧对齐，强制包括最后一项生效

   垂直对齐

3. vertical-align用于指定行内元素和表格单元格元素垂直对齐方向，必须是行内元素p标签元素都不行

4. 属性值

   相对于父元素的垂直对齐方式

   属性值	说明
   sub	元素基线与父元素下标基线一致（没有基线的元素，使用外边距的下边缘替代。）

   相对于整行垂直对齐方式常用

   属性值	说明
   top	元素以及其后代元素的顶部与整行顶部对齐
   bottom	元素以及其后代元素的顶部与整行底部对齐

   也可以使用具体数值表示

3.2 文本缩进

1. 用来指定文本的首行缩进

2. text-indent

3. 属性值

   单位	说明
   px	固定单位，一般不使用（不响应式）
   em	相对当前元素字体大小的几倍
   %	类似于em

   注：可正可负，如果为负，则表明向左缩进一定大小的距离。

3.3 字符间隔

使用letter-spacing和word-spacing控制字符的间隔，其中前一项针对于CJK，后一项针对于non-CJK

3.4 文本排版模式

使用wiriting-mode进行设置

属性值	说明
horizontal-tb	水平从左到右（一般状态），没有水平从右到左
vertical-lr	垂直从左到右
vertical-rl	垂直从右到左