字体的其他样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
.p1 {
color: red;
font-size: 30px;
font-family: "微软雅黑";
font-style: oblique;
font-weight: bold;
font-variant: small-caps;
}
.p2 {
font-size: 50px;
font-family: 华文彩云;
font-style: italic;
font-weight: bold;
font-variant: small-caps;
}
.p3 {
font: small-caps bold italic 60px "微软雅黑";
}
</style>
</head>
<body>
<p class="p3">我是一段文字,ABCDEFGabcdefg</p>
<p class="p1">我是一段文字,ABCDEFGabcdefg</p>
<p class="p2">我是一段文字,ABCDEFGabcdefg</p>
</body>
</html>
![请添加图片描述](https://i-blog.csdnimg.cn/blog_migrate/9bb1c8c041838719955cbed5a7be9b67.png)
1. font-style
- font-style 可以用来设置字体的斜体
- 可选值:
- normal 默认值,文字正常显示
- italic 文字会以斜体显示
- oblique 文字会以倾斜的效果显示
- 大部分浏览器都不会对倾斜和斜体做区分,
- 也就是说我们设置 italic 和 oblique 他们的效果往往是一样的
- 一般我们只会使用 italic
.p1 {
font-style: oblique;
}
2. font-weight
- font-weight 可以用来设置文本的加粗效果
- 可选值:
- normal 默认值,文字正常显示
- bold 文字加粗显示
- 该样式也可以指定 100-900 之间的 9 个值
- 但是由于用户的计算机中往往没有这么多级别的字体,所以达不到我们想要的效果
- 也就是 200 有可能比 100 粗,300 有可能比 200 粗,但是也可能是一样的
.p1 {
font-weight: bold;
}
3. font-variant
- font-variant 可以用来设置小型大写字母
- 可选值:
- normal 默认值,文字正常显示,
- small-caps 文字以小型大写字母显示
- 小型大写字母:
- 将所有的字母都以大写形式显示,但是小写字母的大写
- 要比大写字母的大小要小一些。
.p1 {
font-variant: small-caps;
}
4. font
- 在 CSS 中还为我们提供了一个样式叫 font,
- 使用该样式可以同时设置字体相关的所有样式,
- 可以将字体的样式的值,统一写在 font 样式中,不同的值之间使用空格隔开
- 使用 font 设置字体样式时,斜体 加粗 小大字母 没有顺序要求,甚至可写可不写
- 如果不写则使用默认值,但是要求文字的大小和字体必须写,而且字体必须是最后一个样式
- 大小必须是倒数第二个样式
- 实际上使用简写属性也会有一个比较好的性能
- 对比
.p2 {
font-size: 50px;
font-family: 华文彩云;
font-style: italic;
font-weight: bold;
font-variant: small-caps;
}
.p3 {
font: small-caps bold italic 60px "微软雅黑";
}