css学习（六）：字体和文本布局、百分比问题、不透明度；

一、css字体：

1、字体种类选取：font-family；

• 例子："Trebuchet MS", Verdana, sans-serif；浏览器先从第一个开始，查看此字体再机器中是否可用，如果可用，则选用第一个字体，如果不可用，则查看第二个字体再机器中是否可用......一般最后一个是通用的；

2、字体大小设置：font-size：

• 浏览器默认的（根）字体大小是16；
• 字体大小百分比、em都是相对其父元素字体大小计算的；
• rem是相对于根元素字体大小计算的；
• 通过的做法就是在html/body中设置一个默认基准字体大小，如：html {font-size：10px；}，这样，一些加大（如标题）或者缩小（如注释）的字体，则可更容易设置；如h1{font-size：2.6rem}；p{font-size:1.4rem};
• em作为单位的时候，它代表的是当前元素所使用字体大小的倍数(font-size除外，它代表的是父元素字体的倍数)

3、字体粗细设置：font-weight：（normal）

• normal == 400；（100,200,300,400，......900）
• bold== 700；
• lighter：比从父元素继承过来的字体更细；
• bolder：比从父元素继承过来的字体更粗；

4、字体样式倾斜：font-style：（normal）

• normal：普通字体，不倾斜；
• italic：如果当前字体倾斜版本可用，则设置成倾斜版本；如果不可以，则用oblique状态；
• oblique：想当于备用，强制变成倾斜样式；

5、小型大学字母：font-variant：（normal）

• normal：正常字体；
• small-caps：小型大写字体；

6、字体颜色：color；

• 颜色名称：如red；
• 16进制的颜色：如：#dd（红）00（绿）38（蓝），两位代表一个rbg数字；
• rgb代码的颜色：如：（255,255,255）；三色混合是白色，三者的值一样的时候是灰色（除了0、255）；

7、font-face 和 font awesome（字体图标）

• font-face规则： @font-face{  font-family:"远程字体名称";   src:url(http://);  }
• Font Awesome 图标：<link rel="stylesheet" href="https: