最近评论
正在载入评论列表...
5.3 小体大写字体设置font-variant
属性值：normal | small-caps | 继承值
初始值：normal
作用于：所有元素
是否继承：是
百分比值：不适用
计算值：指定的值
在字体样式分类中还有一类就是“小体大写”。所谓“小体大写”就是文本以大写字母形式出现，但是字母尺寸要比真正的大写字母稍微小一些。示例5.5演示了小体大写和正常大写的对比情况，效果如图5.6所示。
示例5.5
<html>
<head>
<title>CSS Demo</title>
<style>
body { font-family: "Times New Roman", Times;
font-size: 30pt; }
</style>
</head>
<body>
<p style="font-variant: small-caps;">Here is small-caps.
<p>HERE IS CAPITALIZED.
</body>
</html>
图5.6 小体大写和大写字母的对比
|
注 意 |
||
|
|
font-variant属性区别于把字体转换为真正大写的text-transform属性，具体详见6.6节内容。 |
|
在设计者指定font-variant属性的时候，如果一种字体没有相应的小体大写与之相匹配，则浏览器会自动用大写文本代替小体大写样式。
示例5.6演示了把<h2>元素文本设置为小体大写的方法。
示例5.6
<html>
<head>
<title>CSS Demo</title>
<style>
h2 { font-variant: small-caps;
font-family: Arial,sans-serif; }
</style>
</head>
<body>
<h2>This is Headline 2 with small-caps</h2>
</body>
</html>
效果如图5.7所示，小体大写由小写字母变化而来，而原本大写的字母则保持正常大写的原状。
图5.7 小体大写由小写字母变化而来
在Dreamweaver 8中，设置字体小体大写的方法如图5.8所示。
图5.8 在Dreamweaver 8中定义文本小体大写属性
图书导读
