标签：显示效果 属性 多行 html color 没有 地方 div var
font属性可用于font-style,font-family,font-weigth,font-variant,font-size,line-height这六个属性的简写，下面来分别说明。
1、font-style 文字倾斜
参数：oblique/normal/italic normal选择font-family的常规字体;oblique选择倾斜体;italic 选择斜体。
2、font-weight 文字加粗
参数：normal(400)/bold(700)/lighter(比从父元素继承来的值更细)/bolder(比从父元素继承来的值更粗)/number(一个介于 1 和 1000 (包含) 之间的 <number> 类型值).
3、font-size 文字大小
参数：20px(数字加单位)/关键字 可以使用关键字，像素或em数字值来定义字体大小。
关键字：small/medium/large...... 可用于定义网络字体大小。通过在body元素上定义关键字字体的大小，可以在网页的任何地方设置相对字体大小，有利于缩放整个网页的字体大小。
像素：需要精确的像素时使用此种方法。像素大小固定 ，但不同浏览器有可能显示效果有细微的差别。
组合方式：关键字+像素
em：em的大小是动态的，当定义或继承font-size属性时，1em等于这个元素的字体大小。如果在网页中没有设置文字大小那1em等于浏览器默认文字大小通常是16px.如果设置了body元素字体大小为20px,那1em=20px,2em=40px. 换算公式如下：
em=希望得到的像素大小/父元素字体像素大小
可以设置body元素的字体大小为62.5%（即默认大小16px的62.5%）等于10px。所以20px=2em,16px=1.6em.
4、font-family 文字字体
"主要字体","备选字体1","备选字体2"表示如果用户电脑上有"主要字体"就显示"主要字体"，如果没有就选择"备选字体1"，如果没有"备选字体1"，那就是"备选字体2"。
"英文字体","中文字体"；英文字符 使用英文字体，中文字符 使用中文字体；
5、font-variant 把段落设置为小型大写字母字体
这个的意思就是所有的小写字母均会被转换为大写，但是所有使用小型大写字体的字母与其余文本相比，其字体尺寸更小。
参数：normal(浏览器显示一个标准字体) / small-caps(浏览器显示小型大写字母的字体) / inherit(从父元素继承font-variant属性的值)
6、line-height 行高
它代表了一行文字在容器中所占的高度，如果行高的值和容器的高度相等，那文字就会垂直居中。
参数：normal/数字/长度/百分比
测量多行文字行高的方法：
a. 首先要知道文字的大小 b.知道两行文字之间的距离 c.拿上边量出的距离/2 d.行高是上边距+文字高度+下边距
（如果b为奇数，文字上边距会少一像素，下边距会多一像素，如果行高为偶数那就刚好）
范例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>font</title> <style> body{ font-size: 62.5%; } div{ border:1px solid red; font-size: 1.5em; font-style: oblique; font-weight: bold; font-family: Arial, Helvetica, sans-serif; line-height: 30px; font-variant: small-caps; } </style> </head> <body> <div>我的名字是davina</div> </body> </html>
标签：显示效果 属性 多行 html color 没有 地方 div var
原文地址：https://www.cnblogs.com/davina123/p/12336460.html
