字体和文本样式

字体

属性 属性值 作用 备注 继承性
font-family 字体名
集体集
设置字体 /
font-style normal 默认
italic 斜体
oblique 倾斜
设置字体的斜体 很多浏览器不区分两种倾斜方式
只用italic即可
font-size px
em
设置字体大小 /
font-weight normal 默认
100-900
bold常用
字体加粗 不一定全都有不同效果
400相当于normal
700=bold
font-variant normal 不变
small-caps
小写字母转小型大写字母 /
字体 font-family
说明:
font-family属性值:字体名1,字体名2....,备选字体集;
  -含空格字体名和中文,用英文引号引用
  -多个字体,用英文逗号隔开
  -设置多个字体,浏览器依次查找,都没有,则选用字体集,还是没有就使用浏览器默认样式。
  -常用的字体集可能就是serif和sans-serif

font简写顺序
font: italic small-caps bold 16px/50px '微软雅黑','宋体',serif;

https://upload-images.jianshu.io/upload_images/6684438-26036a5618296969.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240


文本样式


属性 属性值 作用 备注 继承性
text-align left
center
right
justify两端对齐
水平对齐方式 只能为块级盒子使用
使内部元素
文字,行内,行内块元素(img,input等)对齐
vertical-align / 垂直对齐方式 使文字,行内块元素(img,input,单元格等)对齐 ×
line-height number
em
百分比
px
设置基线与基线的距离 number em 百分比根据自身字体大小计算
如果祖先元素设置的是em %
那么继承的是最终计算的值而不是em %
text-indent em
px
设置首行缩进 正值右侧缩进
负值向左移动
-9999px可以将不想显示的文字隐藏起来
letter-spacing em
px
可以指定字符间距 /
word-spacing em
px
设置词与词之间空格的大小 /
text-transform none 默认值
capitalize 首字母大写
uppercase 大写
lowercase 小写
设置大小写转换 /
text-decoration none默认值
underline 下划线
overline 上划线
line-through 删除线
设置文本的修饰 / ×
color 颜色名称
16进制
rgb()
/ /
vertical-align
大部分取值是相对于父元素来说的:
       baseline 默认值
           元素基线与父元素的基线(所在行框)对齐。
           对于一些 可替换元素,比如