字体（font）

一、属性

color：

设置字体颜色

设置方式：

①：使用相对应的英文

②：使用rgb（red,green,blue）三原色，取值在0~255

③：使用rgba（red,green,blue,alpha）alpha取值[0,1]透明度

④使用十六进制 #000000 每两个0代表red，green，blue

font-size：

设置字体大小，单位px，还有其他单位【em（当前元素的字体大小），rem（html的字体大小，移动端常用），vh（移动端常用）】

font-weigh：

设置字体大小。范围[100~900]整百数，lighter=100代表极细，normal=400代表正常，bold=700代表加粗。

font-family：

设置文字字体，用户电脑上有改字体才会有效。一般再后面添加一个网页五大类[①serif：衬线字体 ②sans-serif：非衬线字体 ③monospace：等宽字体 ④cursive：草书字体 ⑤antasy：虚幻字体]中的一种

添加自定义的字体：用户在查看时会自动下载字体

写法： @font-face{

font-family:"字体名称";

src:url("字体路径")

}

font-style：

设置字体样式。normal：正常（默认值），italic（斜体），oblique（倾斜）

注：font简写：文字大小和文字字体必须写，且文字大小和文字字体在最后二个

二、文本设置

text-indent：

设置首行缩进，单位一般为em

text-align：

设置文本对齐方式。值：left/right/center/justify（两端对齐）

text-decoration:

设置文本修饰。值：none：默认值

underline：添加下划线

overline：添加上划线

line-through：设置删除线

text-transform：

设置文本大小写。

值：none：默认值

capitalize：单词首字母大写，通过空格识别

uppercase：所有字母大写

lowercase：所有字母小写

text-overflow:

设置文本溢出包含块的显示样式

值：clip：修剪文本

ellipse：溢出部分用省略号代替

text-shadow：

text-shadow:x y blur color;

x：设置水平方向的偏移量

y：设置垂直方向的偏移量

blur：设置阴影的模糊半径

color：设置阴影颜色

line-height：

设置文本行高

行高=上间距+文字高度+下间距，上间距=下间距

letter-spacing：

设置字符之间的距离

word-spacing：

设置单词与单词之间的距离

white-space：

设置空白处理

vertical-align：

设置行内，行内块元素垂直对齐方式

值：baseline：默认，基线对齐

top：顶部对齐

middle：居中对齐

bottom：底部对齐

三、文本省略

单行省略

设置元素的宽高->内容溢出是隐藏（overflow）->设置文字默认一行显示（white-space）->文本溢出样式：text-overflow

div{

width：100px；

设置元素宽度

overflow：hidden;

设置元素内容溢出影藏

text-overflow:ellipsis;

设置溢出影藏内容的样式

white-space:norwrap;

设置内容不换行

}

多行省略

div{

width：100px;

overflow:hidden;

text-overflow:ellipsis;

disply:-webkit-box;

设置元素为弹性伸缩盒模型显示

-webkit-line-clamp:2;

设置显示的行数

-webkit-box-orient:vertical;

设置伸缩盒的子元素垂直排列

}