4.1 属性 font-style
CSS还有很多属性可以用来控制网页上的字体和显示效果。通过font-style、font-variant和font-stretch可以调整文本的风格、显示方式和宽度。我们来详细看一下这些属性。
属性font-style定义了文本的风格。它可以用来设置斜体或者普通文本样式。
值:
normal: 普通文本样式（默认）italic: 斜体文本oblique: 类似于italic的斜体文本，但倾斜方式不同
使用示例:
CSS
.normal {
font-style: normal;
}
.italic {
font-style: italic;
}
.oblique {
font-style: oblique;
}
HTML
<body>
<p class="normal">这是普通文本。</p>
<p class="italic">这是斜体文本。</p>
<p class="oblique">这是斜体文本 (oblique)。</p>
</body>
4.2 属性 font-variant
属性font-variant控制小型大写字母（小型大字）。它可以改变字体，使所有字母变成大写，但原来是小写的字母会变得更小。
值:
normal: 普通文本（默认）small-caps: 小型大写字母文本
使用示例:
CSS
.normal {
font-variant: normal;
}
.small-caps {
font-variant: small-caps;
}
HTML
<body>
<p class="normal">这是普通文本。</p>
<p class="small-caps">这是小型大写字母文本。</p>
</body>
其他值 (CSS Fonts Level 4)
CSS Fonts Level 4为font-variant属性增加了其他值，比如all-small-caps、petite-caps、 all-petite-caps、unicase和titling-caps。不过这些值并不在所有浏览器中支持。
4.3 属性 font-stretch
属性font-stretch控制字体压缩或拉伸的程度。它改变字体的宽度，而不会影响高度，常用于选择合适的字体变体（如果可用）。
值:
normal: 普通宽度的字体（默认）ultra-condensed: 极度压缩的字体extra-condensed: 非常压缩的字体condensed: 压缩的字体semi-condensed: 稍微压缩的字体semi-expanded: 稍微拉伸的字体expanded: 拉伸的字体extra-expanded: 非常拉伸的字体ultra-expanded: 极度拉伸的字体
使用示例:
CSS
.normal {
font-stretch: normal;
}
.condensed {
font-stretch: condensed;
}
.expanded {
font-stretch: expanded;
}
HTML
<body>
<p class="normal">这是正常宽度的字体文本。</p>
<p class="condensed">这是压缩宽度的字体文本。</p>
<p class="expanded">这是拉伸宽度的字体文本。</p>
</body>
GO TO FULL VERSION