如何在CSS中更改字体?
CSS中的
font 属性用于控制文本的外观。通过使用它,我们可以更改文本的大小,颜色,样式等。此
CSS 属性是一种简写属性,它结合了子属性(即
font-style, font-variant, font-weight, font-stretch, font-size, line-height, font-family )。
缩写
font 属性是必填项,它们是
font-size 和
font-family 。如果这两个属性均未包括在内,则整个声明将被忽略。最后必须声明
font-family 的值价值观否则,该声明将再次被忽略。其他五个值是可选的。
font-family 属性允许多个字体名称作为后备值,因为如果浏览器不支持第一种字体,则它将尝试下一个字体,依此类推。必须在以逗号分隔的列表中指定一个以上的
font-family 值声明。
注意:如果字体系列的名称包含多个单词,则必须用引号引起来,例如:" Lucida Console"。
如果我们使用的是
font-style,font-variant 和
font 速记属性中的
font-weight ,必须在声明的
font-size 之前声明它们。如果不是,它们将被忽略并导致对强制值的无知。
body {
font: oblique small-caps bolder 30px cursive;
}
在上面的声明中,我们包括了可选值,但是它们是在定义
font-size 之前定义的。
line-height也是可选的,但是如果我们必须声明它,则必须仅在
font-size 后加正斜杠来声明它。
body {
font: oblique small-caps bolder 30px/15px cursive;
}
在上面的声明中,
15px 是行高。如果我们删除
line-height ,那么我们还必须删除斜杠。
让我们了解如何通过使用示例来更改CSS中的字体。
示例
<html>
<head>
<style>
body{
font-style: italic;
font-variant: normal;
font-weight: bolder;
font-size: 25px;
font-family: garamond, cursive;
}
</style>
</head>
<body>
<p>
Hi, Welcome to the lidihuo.com. This site is developed so that students may learn computer science related technologies easily. The lidihuo.com is always providing an easy and in-depth tutorial on various technologies. No one is perfect in this world, and nothing is eternally best. But we can try to be better.
</p>
</body>
</html>
输出
示例
中的字体在上面的示例中,我们分别使用了字体属性。现在,在此示例中,我们使用
font 速记属性。我们在此
font 速记属性中使用的子属性为
font-style,font-variant,font-weight,font-size和font-family 。
<html>
<head>
<style>
body{
font: oblique normal lighter 25px monospace, garamond;
}
</style>
</head>
<body>
<p>
Hi, Welcome to the lidihuo.com. This site is developed so that students may learn computer science related technologies easily. The lidihuo.com is always providing an easy and in-depth tutorial on various technologies. No one is perfect in this world, and nothing is eternally best. But we can try to be better.
</p>
</body>
</html>
输出
