字体相关的样式

字体相关的样式

字体颜色
○ color
字体大小
○ font-size
○ 相关单位
em
□ 1em等于1个font-size（当前元素的font-size） ▪ em
□ 1rem等于1个根元素的font-size
行高
文本在网页中都需要创建一个文本框，行高就是文本框的高度
○ 使用 line-height来设置行高，文字默认是在行高中居中
○ 行高可以指定一个像素值，也可以指定一个整数，指定一个数字的话行高就会是字体的指定的倍数
▪ 行间距 = 行高 - 字体大小
○ 通过行高可以用来设置行间距：
○ 文字在行内垂直居中，可以将行高设置为何父元素高度一样
行
字体族
font-family
○ 使用font-family来设置字体族
@font-face
○ 通过font-face可以让用户使用服务器中的字体
○ 使用过程中一定要注意版权的问题
1 @font-face {
2 font-family: “Open Sans”;
3 src: url("/fonts/OpenSans-Regular-webfont.woff2") format(“woff2”),
4 url("/fonts/OpenSans-Regular-webfont.woff") format(“woff”);
5 }

• font-weight 字重
• font-style 斜体
• font-variant 字体变形
  ○ font : [加粗 斜体 字体变形] 字体大小/行高 字体族
• 简写属性 font，通过font可以同时设置所有的字体相关样式

文本的格式

水平对齐

• text-align:
• 可选值
• left左对齐
• right右对齐
• center居中对齐
• justify两端对齐
• 垂直对齐
• vertical-align:
• 可选值：
• baseline基线对齐
• top
• bottom
• middle
• 首行缩进
• text-indent
• 文本修饰
• text-decoration
• white-space
• 溢出的文本显示省略号
• white-space:nowrap;
• overflow:hidden
• text-overflow:ellipsis;