CSS补充

网络字体

font-face可以让网页支持网络字体（web font），不再局限于系统自带的字体
常见的字体种类：
  TrueType字体：拓展名是.ttf
  OpenType字体：拓展名是.ttf .otf，建立在TrueType字体之上
  Embedded OpenType字体：拓展名是.eot，OpenType字体的压缩版
  SVG字体：拓展名是.svg .svgz
  web开放字体：拓展名是.woff，建立在TrueType字体之上
注意：并不是所有浏览器都支持以上字体，使用时要多测试。
字体下载：https://fonts.google.com

字体图标

1.阿里巴巴图标库选择图标
2.将图标添加到项目中
3.下载压缩文件
4.将解压后的文件拖到工程中
5.引入下载的iconfont.css
6.给要添加该图标的元素增加class="iconfont"
7.给要添加字体图标的元素设置font-family和颜色大小等

    

关键帧动画

关键帧动画使用@keyframes 来定义多个变化状态，并且使用animation-name来声明匹配：
1.使用@keyframes创建一个规则
2.@keyframes中使用百分比定义各个阶段的样式
3.听过animation将动画添加到属性上

超出文字显示省略号

white-space用于设置空白处理和换行规则
  normal：合并所有连续的空白，允许单词超出时自动换行
  nowrap：合并所有连续的空白，不允许单词超出时自动换行
text-overflow通常用来设置文字溢出时的行为（处理那部分不可见的内容）
 clip：溢出的内容直接裁减掉（字符可能会显示不完整）
 ellipse：溢出那行的结尾处省略号表示
text-overflow生效的前提是overflow不为visible

white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

显示两行文本

span {
    width: 100px;
    /* 设置两行文本的高度 */
    height: 45px;
    background-color: darkolivegreen;
    margin: 0 auto;

    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;

    text-overflow: ellipsis;
    overflow: hidden;
}

视口大小

视口大小的设置，移动端必须加
width：视口宽度
initial-scale：缩放比例

不同单位的对比

• 设置文字大小的单位：
  1.px:像素
  2.em:相对于父元素字体的大小（2em:父元素字体*2）
  3.%：不同场景相对的不一样（在字体中，相对于父元素的字体）
  4.rem: 相对于html的字体大小
• 设置宽度的大小：
  1.px:像素
  2.em:自己有设置font-size，em相对于自己的font-size
  自己没有设置font-size，em相对于父元素的font-size
  3.%：相对于父元素的宽度
  4.rem:相对于html的字体大小

rem

rem: root em 相对于HTML的字体大小

• rem移动端
  根据屏幕大小缩放：使用 js 动态计算;
  动态计算rem值：利用postcss-pxtorem;