字体属性用法

2.overflow属性：超出范围的内容处理
一.字体属性
css样式中，常见的字体属性有以下几种：

p{
    font-size: 50px;         /*字体大小*/
    line-height: 30px;      /*行高*/
    font-family: 幼圆,黑体;     /*字体类型：如果没有幼圆就显示黑体，没有黑体就显示默认*/
    font-style: italic ;        /*italic表示斜体，normal表示不倾斜*/
    font-weight: bold;    /*粗体*/
    font-variant: small-caps;  /*小写变大写*/
}

1.用行高让单行文本居中
如果一段文本只有一行，如果此时设置行高 = 盒子高，就可以保证单行文本垂直居中。

2.font属性简写
字号、行高、字体三大属性

（1）字号：

    font-size:14px;
1
（2）行高：

    line-height:24px;
1
（3）字体：（font-family就是“字体”，family是“家庭”的意思）

    font-family:"宋体";
1
是否加粗属性以及上面这三个属性，可以连写：（是否加粗、字号 font-size、行高 line-height、字体 font-family）

格式：

    font: 加粗 字号/行高/ 字体
1
举例：

    font: 400 14px/24px "宋体";
1
上面这几个属性可以连写，但是有一个要求，font属性连写至少要有字号和字体，否则连写是不生效的（相当于没有这一行代码）。

举例：

font: bold italic 20px/1.5 'Courier New', Courier, monospace;
1
3.字体加粗属性
取值范围 normal | bold | bolder | lighter | 100 ~900。

.div {
    font-weight: normal; /*正常*/
    font-weight: bold;  /*加粗*/
    font-weight: 100;
    font-weight: 200;
    font-weight: 900;
}
1
2
3
4
5
6
7
在设置字体是否加粗时，属性值既可以填写normal、bold这样的加粗字体，也可以直接填写 100至900 这样的数字。normal的值相当于400，bold的值相当于700。

4.大小写转换
小写转大写：

span {
    font-variant: small-caps;
}
...

<span>xioafeixia</span>
1
2
3
4
5
6
  /* 首字母大小 */
  text-transform: capitalize;
 
  /* 全部大写 */
  text-transform: uppercase;

  /* 全部小写 */
  text-transform: lowercase;
1
2
3
4
5
6
7
8
二.文本属性
CSS样式中，常见的文本属性有以下几种：

letter-spacing: 0.5cm ; 单个字母之间的间距

word-spacing: 1cm; 单词之间的间距

text-decoration: none; 字体修饰：none 去掉下划线、underline 下划线、line-through 中划线、overline 上划线

text-transform: lowercase; 单词字体大小写。uppercase大写、lowercase小写

color:red; 字体颜色

text-align: center; 在当前容器中的对齐方式。属性值可以是：left、right、center（在当前容器的中间）、justify

text-transform: lowercase; 单词的字体大小写。属性值可以是：uppercase（单词大写）、lowercase（单词小写）、capitalize（每个单词的首字母大写）

text-indent:文本缩进，控制元素部的文本、图片进行缩进操作。

vertical-align: 用于定义内容的垂直对齐风格，包括middle | baseline | sub | super 等。

排版模式

模式    说明
horizontal-tb    水平方向自上而下的书写方式
vertical-rl    垂直方向自右而左的书写方式
vertical-lr    垂直方向内内容从上到下，水平方向从左到右
1.空白处理
使用 white-space 控制文本空白显示。

选项    说明
pre    保留文本中的所有空白，类似使用 pre 标签
nowrap    禁止文本换行
pre-wrap    保留空白，保留换行符
pre-line    空白合并，保留换行符
h2 {
    white-space: pre;
    width: 100px;
    border: solid 1px #ddd;
}

2.overflow属性：超出范围的内容处理
overflow属性的属性值可以是：

visible：默认值。多余的内容不剪切也不添加滚动条，会全部显示出来。
hidden：不显示超过对象尺寸的内容。
auto：如果内容不超出，则不显示滚动条；如果内容超出，则显示滚动条。
scroll：Windows 平台下，无论内容是否超出，总是显示滚动条。Mac 平台下，和 auto 属性相同。