【文本相关属性】

font-size (字体大小)

font-size:16px;

浏览器默认字体大小:16px
(谷歌浏览器最小解析(字体大小): 12px)
单位换算:
pt:
3pt = 4px
12pt = 16px
em:
1em = 16px
(默认 1em = 16px ,但它会受font-size的影响,比例会发生变化)

font-family (字体类型)

font-family:“宋体”;

IE浏览器、 QQ浏览器、 360浏览器 等默认是宋体,新宋体；谷歌浏览器和火狐浏览器默认是微软雅黑。
解析方式：

font-family:"幼圆","宋体"；

先解析幼圆字体，没有幼圆，解析成宋体，
即第一个解析不出来，解析第二个，第二个解析不出来解析第三个，都解析不出来的话用默认字体。
(注意：英文字体解析的是英文的,和中文没关系)

font-weight (加粗)

font-weigth有两种表示方式：
1、数字（100~500加粗不明显偏细, 400~500常规, 600~900加粗明显）
如：font-weight:650;
2、单词（bold加粗 ,bolder ,更粗的 ,normal 常规）
如: font-weight:bolder; (更粗的)
font-weight:bold;(加粗)
font-weight:normal;(常规)

font-style(倾斜)

font-style:italic; (斜体字)
font-style:oblique;(倾斜的文字)
font-style:normal;(常规显示)

text-align(文本水平对齐方式)

text-align:left; 水平靠左
text-align:right; 水平靠右
text-align:center; 水平居中
text-align:justify; 水平两端对齐,但是对多行起作用
text-align-last:justify; 最后一行水平两端对齐
text-align:center; 它不仅可以使文本居中,还可使行内元素和行内块元素居中。
用 text-align 可以使宽度未知的文本居中, (它是哪个元素居中就给这个元素的父元素写text-align)
通俗来讲，就是可以让某个盒子(父元素) 里面的文本或盒子(子元素) 居中,父元素不居中,子元素居中。

附加题：
如何实现一个盒子的文本内容 在单行的时候水平居中, 在多行的时候水平靠左显示?

答：需要在这个盒子里面包一个盒子,外面的盒子水平居中,里面的盒子靠左显示,
这样的话, 就能实现单行可以居中,多行可以靠左显示。

line-height (行高)

行高=字号大小 + 两个半行距
行高 = 字号大小 + 行距
line-height有三种表示方式：
1、数字
line-height:1; 行高是font-size（字号大小）的1倍
2、%
line-height:20%；行高是font-size（字号大小）的20%倍
3、px
line-height:20px; 行高是20像素

注意:
line-height的数据=height的数据,可以实现单行文本垂直居中
(如果想要文字的高度和容器保持一样,可以用line-height:字号大小; 清除掉自己的上下距离;)

如果行高大于容器高度的时候,那么单行文本是垂直向下的
如果行高小于容器高度的时候,那么单行文本是垂直向上的
如果行高等于容器高度的时候,那么单行文本是垂直居中的

当文本大小一样的时候,用line-height调整样式,计算半行距,具体再设置。
当文本大小不一样时,垂直用margin 或者 padding 去调 但是需要添加上line-height:1; 以去除自带的垂直距离。

font（文字简写）

是：
font-style（倾斜） font-weight（加粗） font-size（大小）/ line-height（行高） font-family 的简写,其中 倾斜和加粗顺序可以变换,但是后面的三个顺序不能变
例如: font: italic 800 30px/80px “宋体” ,
必须同时指定font-size和font-family属性时才起作用。

text-decoration (文本修饰）

属性值:

• none(没有)
• underline(下划线)
• overline(上划线)
• line-through(删除线)

例如:
text-decoration:underline;
(最常用于 超链接a去除自身自带的下划线)

text-indent (首行缩进)

它也可以取负值,
text-indent 属性只对第一行起作用
单位可以是em, 也可以是px

letter-spacing (字间距)

控制文字与文字的间距

word-spacing 词间距

控制词与词之间的间距,(用空格分开的为词)

附加

单行文本溢出显示省略号

(多行文本,单行显示,多余文本显示省略号)

1、设置宽度
width:400px ;
2、强制文本单行显示
white-space:nowrap;
3、多余内容溢出隐藏
overflow:hidden;
4、显示省略号
text-overflow:ellipsis;

其中:
white-space(白色空间 对空格处理)

• nowrap 可以让中文不换行,且不会识别空格
• pre 可以让中文换行,且会识别回车和空格
• pre-line 可以让中文换行,且会识别回车,不会识别空格
• pre-wrap 可以让中文换行 ,且识别回车和空格,

overflow(做溢出处理的)

• hidden (溢出隐藏)
• visible (默认值,不做处理,该溢出还溢出)
• auto (如果溢出则有滚动条,如果不溢出没有滚动条)
• scroll (不管溢出还是不溢出都有滚动条)

text-overflow(显示省略号,需要配合overflow,单独用没效果)

• clip (默认值)
• ellipsis (省略号)