首字母字号变大而不影响其下划线粗细的方法

目的样式：全部大写字母，带下划线，第一个字母24px，其余字母略小，约19px。

Html标签：

<p class="about">about</p>    
<p class="about">technologe</p>

css样式:

.about{    
font-size: 24px;    
color: #000;    
font-family: "微软雅黑";    
line-height: 40px;    
text-decoration: underline;    
font-variant: small-caps;    /*关键样式*/
text-transform: capitalize;  /*关键样式*/  
}

text-transform 属性

这个属性会改变元素中的字母大小写，而不论源文档中文本的大小写。如果值为 capitalize，则要对某些字母大写，但是并没有明确定义如何确定哪些字母要大写，这取决于用户代理如何识别出各个“词”。

兼容性：

浏览器兼容：IE、Firefox、Chrome、Safari、Opera

注释：任何的版本的 Internet Explorer （包括 IE8）都不支持属性值 "inherit"。所有浏览器都支持 text-transform 属性。

font-variant 属性

设置小型大写字母的字体显示文本，这意味着所有的小写字母均会被转换为大写，但是所有使用小型大写字体的字母与其余文本相比，其字体尺寸更小。(意味着已经使用大写字母的文本字体会更大)。

兼容性:

所有主流浏览器都支持 font-variant 属性。

注释：任何的版本的 Internet Explorer （包括 IE8）都不支持属性值 "inherit"。