css文字文本属性规格

字体规则

字体规则和文本规则都可被继承

• font-family 字体

   font-family:"Microsoft YaHei","宋体"，sans-serif
   若用户电脑没有安装微软雅黑则使用黑体，没有黑体则使用非衬线字体
  

  字体栈: “Microsoft YaHei”,“宋体”
  在浏览器所在pc从字体栈顶到底寻找字体，找不到使用默认字体，windows默认字体为微软雅黑

• font-size 字体大小

     font-size: 12px
  

• font-weight 字体粗细程度
  100~900
  normal （400）
  bold (700)
  bolder (比当前字体更粗，为相对单位）
  lighter (比当前字体细）

• font-style 是否是斜体
  italic
  normal

• color 字体颜色
  预定义颜色值 red ,blue
  十六进制 #fff 为白色 #000 为黑色 #ff0000 为红色
  RGB代码 rgb(255,0,0)为红色 rgba(0,0,0, .8)为黑色，设置透明度为0.8

• line-height 行高
  可以使文字在行内垂直居中显示（默认字号大小为16px，行高为18px）

单位：
　　1）px(像素)
　　2）%(百分号)：如果line-height单位设置为%，%之前的数据一定是整数 ：150% ，200%，那么将来在计算的时候，基数是当前标签中的文本的字体的大小。
　　3）em：效果跟%是一样一样的。以当前标签的字体大小为基数。
　　注意：一行em的大小相当于是当前标签中的font-size的大小，em之前的数据一定是：1.2em ,1.5em ,2em
4）不带单位：如果不涉及到继承，那么带不带单位（em）都是一样的效果，但是如果涉及到继承的话，那么就有很大的区别了：
如果单位是em，那么将来在继承的时候，我们的浏览器会先将行高对应的具体的数值计算出来以后再继承。
　　如果没有单位，那么将来在继承的时候，我们的浏览器会先将line-height这个属性继承给子元素，再在子元素的font-size来计算。line-height: 1.5;（相对于子元素字符大小的1.5倍）。
　　
　　行高可以被继承
设置line-height:1 可以取消上下间距

长度的相对单位：
1px 像素
em 相对于当前元素上的字号
rem 相对于根元素（html）上的字号
（网页精准布局时，设置line-height：1；取消上下间距）

• font 速写形式

   font: font-style font-weight font-size/line-height font-family
   font: normal normal 14px/1.2 '宋体','微软雅黑';
   font: 14px/1.2 '宋体','微软雅黑';
  

网络字体(iconfont)
应用
分析实现过程

      @font-face {
        font-family:"iconfont"
        src:
      }
      
      .iconfont {
        font-family:"iconfont"
      }
      .icon-Backward-Button:before {
        content: "\e82e";
      }

1.引入iconfont的css文件
将所需的图标添加到购物车，添加到项目，点击Font class 生成图标的css文件（单色图标库）
多色图标只能下载为图片使用

<link rel="stylesheet"  href="//at.alicdn.com/t/font_2754508_l6gxawcfxl.css"  >

2.调用

	<i class="iconfont icon-tongzhi" > </i>

复制图标的代码放在标签内作为标签的类名（必须有iconfont作为类名）
可以在css中设置图标属性（相当于文字）

文本规则

• text-align 文本在容器中显示方式（对齐方式）
  center 居中显示
  left 默认左对齐
  right 右对齐
  设置span,a,input,图片和文本水平居中显示：给父标签设置text-align:center

• text-decoration 装饰文本
  text-decoration:none; 清除装饰文本，常用于a标签
  text-decoration-line：underline/overline/line-through 设置装饰文本为下划线，上划线，删除线
  text-decoration-style: double; 双线
  text-decoration-color: red;

• text-indent 文本缩进
  text-indent:2em; 首行缩进两格(1em为1个字的大小)

• text-transform 控制大小写，用于英文文档
  none
  uppercase 小写变大写
  lowercase 大写变小写
  capitalize 首字母变大写

• text-shadow: 文本阴影
  h-shadow：必须属性，水平偏移量，允许负值
  v-shadow：必须属性，垂直偏移量，允许负值
  blur：可选属性，模糊偏移量（px）
  color：可选属性，阴影颜色

   text-shadow: h-shadow v-shadow  blur  color;
  

可以同时设置多个阴影，不同阴影属性之间用逗号隔开即可

• white-space：容器内的文本是否会主动换行
  nowrap 不换行
  normal 显示不开时自动换行

• overflow: 容器内的内容超出部分如何处理？
  hidden 超出部分隐藏
  scroll 无论是否超出都添加滚动条
  auto 超出部分自动添加滚动条，不超出不显示滚动条
  visible 不隐藏超出内容且不添加滚动条

• text-overflow: 文本超出部分如何显示提示？
  ellipsis 超出部分显示为省略号

将溢出文本用省略号显示
单行文本：
white-space:nowrap; /* 强制文本在一行内显示 /
overflow:hidden; / 超出部分隐藏*/
text-overflow:ellipsis; /* 超出部分用省略号代替 */

多行文本：
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
text-overflow: ellipsis;
overflow: hidden;