css之font
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>