1、font-style
- normal:正常
- italic:斜体
2、font-weight
数字以100为步长。
- 400:normal
- 700:bold
3、font-size
- px:通常使用双数。任意浏览器的默认字体大小都是16px。
- em:相对于当前浏览器内文本的字体大小。所有未经调整的浏览器都符合: 1em=16px。那么12px=0.75em,10px=0.625em。
为了简化font-size的换算,需要在css中的body选择器中声明font-size=62.5%,这就使em值变为 16px*62.5%=10px, 这样12px=1.2em, 10px=1em。
但是:em会继承父级元素的字体大小,导致1em在不同的父元素下,所刻画的物理长度不一定固定。因此引入rem。 - rem:rem是相对于根元素
<html>
,只需要在根元素确定一个参考值。html {font-size: 62.5%; // 10 ÷ 16px × 100% = 62.5% } body {font-size: 1.4rem; // 1.4 × 10px = 14px } h1 { font-size: 2.4rem; // 2.4 × 10px = 24px }
- %:把 font-size 设置为基于父元素的一个百分比值。
参考
4、line-height
设置行间的距离(行高)。定义了该元素中基线之间的最小距离而不是最大距离
5、font-family
在浏览器无法提供第一个特定字体时,就可以依次选择一个候选字体。
font-family: Times, TimesNR, 'New Century Schoolbook', Georgia, 'New York', serif;
注:多个单词的字体要使用引号。
6、font-variant
font-variant属性可以设定小型大写字母。
- normal 默认值。浏览器会显示一个标准的字体。
- small-caps 浏览器会显示小型大写字母的字体。
- inherit 规定应该从父元素继承 font-variant 属性的值。
7、font
次序固定,不可改变。未设置的属性会使用其默认值。但是font-size和font-family必须设置。
{
font: font-style font-variant font-weight font-size/line-height font-family;
}
8、字体继承
以上7个属性font、 font-style、font-variant、font-weight、font-size/line-height、font-family,皆可被inline元素继承。