CSS字体设置
font-family
属性值用逗号隔开。浏览器会选择列表中第一个该计算机上有安装的字体,或者是通过
@font-face
指定的可以直接下载的字体。
font-family可以设置字体的通用的字体族名,确保至少满足这个条件让浏览器选择在这个字体族中的字体:
- serif 衬线字体
- sans-serif 非衬线字体
- monospace 等宽字体
字体名字中间有空格时,字体名字要放在单引号内。
font-size
该属性的值会被用于计算em和ex长度单位,定义该值可能改变其他元素的大小。
- 绝对大小small,medium,large
- 相对大小larger,smaller
- 长度值,em,rem,px
- 百分比值
- inherit,继承
推荐使用em。因为em可以自动适应用户的字体,em是一个非常有用的CSS单位。
em: em 值的大小是动态的。当定义或继承font-size属性时,1em等于该元素的字体大小。如果你在网页中任何地方都没有设置文字大小的话,那它将等于浏览器默认文字大小,通常是16px。所以通常1em = 16px。2em = 32px。 如果你设置了body元素的字体大小为20px,那1em = 20px、2em = 40px。那个2就是当前em大小的倍数。
一个常用技巧:
body {
font-size: 62.5%; /* font-size 1em = 10px */
}
p {
font-size: 1.6em; /* 1.6em = 16px */
}
实际使用
例如京东的设置:
淘宝的设置:
可以发现,都在body里进行设置字体,这说明,字体属性是可以继承的。
@font-face
让浏览器下载并使用服务器提供的字体。
注意版权问题,因为字体保存在了服务器中。