2.如果想要设置加粗可以使用font-weight
3.如果想要设置倾斜可以使用font-style
4.如果想要设置字体大小可以使用font-size
上述样式如果想要在一个选择器中使用的话,一下写4个会显得比较冗余,那么我们可以简化综合复合如下的样式
选择器 {font :font-style font-weight font-size/line-height font-family}顺序不可颠倒 其中 font-size和font-family必须保留 否则不会起作用
从 MDN 上可以看到,当元素的一个继承属性 (inherited property)没有指定值时,则取父元素的同属性的计算值(computed value)。
比如 color 属性就是继承属性,给父级元素设置了 color ,则子元素会继承。
CSS 属性 font-family 允许您通过给定一个有先后顺序的,由字体名或者字体族名组成的列表来为选定的元素设置字体。
属性 font-family 列举一个或多个由逗号隔开的字体族,语法如下:
font-family 是一个继承属性,比如,我在child元素的父元素.parent 上添加 font-family: serif,子元素也会继承它的属性值。
但是,我们给子元素的 font-family 随便设置一个值 unknow,这实际上是一个无效的字体。
浏览器识别不出来这是一个无效的值,计算值的结果还是 unknown,但实际效果则是直接降级到浏览器的默认值。此时并不会即成父级元素设置的值,这跟我们的认知还是不一样的。
然而,假如我们设置子元素的样式如下,即在 test 之后再设置一个字体 Gill Sans ,
就会降级到 Gill Sans 了。
我们通常会在全局样式中设置通用字体,以保证字体样式在不同设备上呈现时,至少有一个最基本的字体样式可以降级,而不是直接降级为系统默认字体。
但是当我们为某些特定元素设置字体样式时,比如设计希望在苹果设备上呈现出 PingFang SC 字体样式。如果理所当然的设定为,
那么会覆盖全局设置的通用字体样式,而如果该设备上没有苹方字体时,就会降级到系统默认字体,而不是设置的全局通用字体。
因此当UI有特殊字体样式要求时,请务必在设置字体样式时,除了特殊字体的声明,也要保证在特殊字体后边添加用于降级的通用字体,比如:
否则当用户在系统上设置了奇怪的默认字体时,您的UI设计稿就会也随之变得奇奇怪怪。
CSS中font是设置字体属性的。
font在css的作用就是在一个声明中设置所有字体属性:
举例说明:
<html>
<head>
<style type="text/css">
p.ex1
{
font:italic arial,sans-serif
}
p.ex2
{
font:italic bold 12px/30px arial,sans-serif
}
</style>
</head>
<body>
<p class="ex1">这是一个测试一般字体段落</p>
<p class="ex2">这是一个测试字体的段落</p>
</body>
</html>
运行效果: