字体属性
指定字体系列
属性:font-family,取值:value1 value2
注意:字体取值包含中文或是特殊符号,要用双引号””引起来
eg:font-family:”宋体” Arial;
字体大小
属性:font-size,取值单位px,pt,em,rem等
eg:font-size:16px
字体粗细
属性:font-weight,
取值:1、normal,正常体,400
2、bold,加粗,900
3、400~900
eg:font-weight:bold
font-weight:700
字体样式
属性:font-style
取值:1、normal,正常体
2、italic,斜体
小型大写字母
针对英文字符,将小写字母变成大写母,但是大小还是跟原来的小写字母一样大
属性:font-variant
取值: 1、normal
2、small-caps
字体复合属性:font:style variant weight size family
注意:使用font属性的话,一定要加上family的值,否则没效果,其他属性没设置的话采用默认值
eg:font : 12px/1.5 Microsoft YaHei,Heiti SC,tahoma,arial,Hiragino Sans GB,"\5B8B\4F53",sans-serif;
文本属性
文本颜色
属性color,
取值:任意合法颜色
文本排列方式
属性text-align,指定当前元素中的文本、行内元素、行内块元素的水平对齐方式,
取值:left,right,center
文字修饰
属性text-decoration,指定文本的线条样式
取值:none(没有线条),underline(下划线),overline(上划线),line-through(删除线)
行高
属性line-height,指定一行文本的高度。
如果行高高于文字本身大小,那么文本将在指定的行高范围内垂直居中显示
使用场合:1、设置一行文本垂直居中对齐,
2、设置行间距
首行文本缩进
text-indent,以px为单位
文字阴影
text-shadow:x y m color
x:水平偏移值,为正数时向右偏移,为负数时向左便宜
y:垂直偏移值,为正数时向下偏移,为负数时想上便宜
m:阴影模糊程度,不能是负数,如果值越大,阴影越模糊,反之越清晰,如果不需要模糊,可以设置为0
color:阴影的颜色,可以是rgba色
文本溢出
一行文本溢出
必须满足三个条件:
1、先强制一行内显示文本:white-space:nowrap;(normal是自动换行)
2、超出部分隐藏:overflow:hidden
3、用省略号代替超出的部分:text-overflow:ellipsis
多行文本溢出
多行文本溢出有较大的兼容性问题,适合于webkit浏览器或是移动端(大部分是webkit)
overflow:hidden;
text-overflow:ellipsis;
display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical