css font-variant全大写并缩小英文字母字体

使用DIV+CSS让英文单词全大写之CSS font-variant英文字母全大写后缩小字体篇

平时我们会遇到在一篇文章中遇到英文单词或英文字母，但又想让这些字母无论是半角小写还是大写，统一让这些英文字母全变成大写，此时我们就可以使用CSS来让其英文字母变成全大写但字母会被缩小。此时我们就需要用到DIV CSS中样式属性font-variant

1. css font-variant语法
2. DIV+CSS font-variant实例
3. CSS教程总结

一、css font-variant语法 - TOP

font-variant : normal | small-caps

CSS参数：
normal : 正常的字体
small-caps : 让字母变成小型的大写字母字体并缩小字母

css手册介绍:font-variant手册 http://www.divcss5.com/shouce/c_fontvariant.shtml

二、DIV+CSS font-variant实例 - TOP

DIVCSS5描述：
我们通过DIV CSS让文章中英文单词或字母都变大写并缩小显示。

Css样式选择器我们命名为divcss5,在html中用class引用。
1、CSS代码：

.divcss5{
font-variant:small-caps}
    

2、HTML代码片段

font-variant:small-caps实现英文或拼音字母全大写并缩小字形显示

3、案例结果截图

在DW软件中字体只被大写，而在浏览器中将会缩小并大写字体

通过css让英文或拼音字母全大写效果截图

说明：注意DIVCSS5对象内内容，被css设置font-variant后，对象内所有无论是大写字母还是小写字母，最终全显示为大写的字母。

三、CSS教程总结 - TOP

在我们日常制作网页时候，文章内插入英文教多是，需要对文章内英文字母显示大写的字母的时候我们就可以使用css样式表font-variant属性实现这一目的。

font-variant将文本里英文转为全大写，并以缩小方式显示。css font-variant实现全大写但英文或拼音字母会被缩小，如果要实现CSS英文只大写而不缩小请用css text-transform字体大小写样式。

另外CSS样式教程让文章英文或拼音字母变全大写之CSS text-transform。

以上是通过CSS样式让对象内容中出现无论大小写字母全变成大写字母。

扩展阅读：
1、字间距(css letter-spacing)：http://www.divcss5.com/rumen/r75.shtml
2、CSS文字大小（css font-size）：http://www.divcss5.com/rumen/r74.shtml#no1
3、CSS加粗\文字加粗（CSS font-weight|div css font-weight|font-weight）：http://www.divcss5.com/rumen/r122.shtml
4、首字母大写text-transform
5、字母全小写
6、CSS英文字母全大写
7、CSS英文字母小写
8、CSS首字母大写

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！