在CSS3样式属性中，字体样式属性font-variant可以设置或判断文本内容是否为小型大写字母，对应的属性值有（1）normal：显示正常的字体（2）small-caps：显示小型的大写字母字体下面利用一个实例来说明font-variant属性的用法，操作如下：
工具/原料
1
CSS3
2
HTML5
3
Bootstrap
4
HBuilder
5
截图工具
6
浏览器
方法/步骤
1
第一步，双击打开HBuilder工具，在创建的Web项目指定目录下新建静态页面fontVariant.html，并引入需要的引用的文件，如下图所示：
2
第二步，在
标签元素内插入一个input输入框和button按钮，分别使用Bootstrap控制它们的样式，如下图所示：3
第三步，保存代码并预览该静态页面，可以在浏览器上查看到一个按钮和一个输入框，如下图所示：
4
第四步，利用jquery初始化函数，在这里添加按钮单击事件，设置输入框中的font-variant属性，如下图所示：
5
第五步，再次保存并预览页面，输入“How are you？”，点击按钮查看效果，如下图所示：
6
第六步，可以看到“are you”首字母变为大写的，并且字体变小了，如下图所示：
注意事项
1
注意CSS3属性font-variant的用法
2
注意使用jquery方法或函数控制元素的样式属性方法
上一篇：css 限制文字长度
下一篇：css设置字母大小写