-
color：用来设置字体颜色
- font-size：用来设置字体大小，浏览器中一般默认的文字大小都是16px
- font-size 设置的并不是文字本身的大小
- 在页面中，每个文字都是处于一个看不见的框中
我们设置的font-size实际上都是设置格的高度，并不是字体的大小
一般情况下文字都要比这个格要小，也有时会比格要大
根据字体的不同，显示效果也不同
-
font-family：用来指定文字的字体
- 当采用某种字体时，如果浏览器支持则使用该字体，如果字体不支持，则使用默认字体
- 该样式可以同时指定多个字体，多个字体之间使用逗号分开
如果前边没有再尝试下一个
-
在网页中将字体分成5大类:
- serif（衬线字体）
- sans-serif（非衬线字体）
- monospace （等宽字体）
- cursive （草书字体）
- fantasy （虚幻字体）
- 可以将字体设置为这些大的分类，当设置为大的分类以后，浏览器会自动选择指定的字体并应用样式,一般会将字体的大分类，指定为font-family中的最后一个字体,用来兜底，衬线和非衬线用的多
-
font-style:用来设置文字的斜体
可选值：
- normal：默认值，文字正常显示
- italic：斜体显示
- oblique：文字会以倾斜的效果显示
大部分浏览器都不会对倾斜和斜体做区分，也就是说我们设置italic和oblique它们的效果往往是一样的, 一般用italic
-
font-weight:用来设置字体的加粗效果
可选值：
- normal：默认值，文字正常显示
- bold：文字加粗显示
- 也可以选择100-900 之间9个整百值，但是由于用户的计算机中往往没有这么多级别的字体，所以不能达到想要的效果，因此一般使用normal，bold设置。
-
font-variant: 可以用来设置小型大写字母
可选值：
- normal：默认值，文字正常显示
- small-caps：文字以小型大写字母显示
下面是图片演示效果：
-
font:使用该样式可以同时设置字体相关的所有样式
- 可以将字体的样式的值，统一写在font样式中，不同的值之间使用空格隔开
- 使用font设置样式时，斜体 加粗 小大字母，没有顺序要求，可以不写,如果不写则为默认值，但是要求字体的大小和字体必须写，而且字体必须是最后一个样式，大小必须是倒数第二个样式
- 实际上使用简写属性会有一个比较好的性能，如果同时设置多个可以选择使用简写
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>字体样式</title>
<style type="text/css">
.p1 {
color: red;
font-size: 30px;
font-family: arial,华文彩云;
font-style: italic;
font-weight:bold;
font-variant:small-caps;
}
p{
font-family:Arial,微软雅黑,serif;
}
.p2{
font:italic small-caps bold 60px "微软雅黑";
}
</style>
</head>
<body>
<p class="p1">
我是一个p标签，AbadCsadfS
</p>
<p style="font-size: 30px; font-family:serif;">
衬线字体：我是一段文字
</p>
<p style="font-size: 30px; font-family: sans-serif;">
非衬线字体：我是一段文字
</p>
<p class="p2">
我是一个p标签，AbadCsadfS
</p>
</body>
</html>
407
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
