欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术!
您的位置:DIVCSS5首页 > DIV+CSS基础 >

使用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代码

  1. .divcss5{font-variant:small-caps} 

2、HTML代码片段

  1. <div class="divcss5"> 
  2. font-variant:small-caps实现英文或拼音字母全大写并缩小字形显示 
  3. </div> 

3、案例结果截图

 CSS font-variant:small-caps大写字母并缩小案例截图
在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首字母大写

如需转载,请注明文章出处和来源网址:http://www.divcss5.com/rumen/r308.shtml

如对文章有任何疑问请提交到DIV CSS论坛,或有任何网页制作CSS问题立即到CSS论坛发贴求解 或 直接DIVCSS5网页顶部搜索遇到DIVCSS疑问。
CSS教程文章修订日期:2018-08-14 17:37 原创:DIVCSS5
本文www.divcss5.com DIVCSS5版权所有。