设置第一个字母字体变大并且所有字母大小写 及下划线

 以上是目标样式，第一个字母大概24px，后面的大概19px，并且都是大写。

如果单纯的给A和T两个字母添加标签再设置字体大小的话，那么设置的underlin；会有所差别，效果如下：

很明显下划线不在一条水平线上。为了解决这个问题可以有两种方法；

第一种：为<p>标签设置border-bottom，可以说设置颜色等属性。

第二种:HTML标签

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

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

 

css样式:

.about{font-size:24px;

          color:#000;

          font-family:"微软雅黑";

          text-decoration:underline;

           text-transform:capitalize;/*关键样式*/

           font-variant:small-caps;/*关键样式*/

text-transform属性：

 这个属性会改变元素中的字母大小写，不管原文档中的字母大小写。如值为capitalize，则要对某些字母大写，但并没有明确定义什么字母大写。

font-variant属性：

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

原文：

转载于:https://www.cnblogs.com/hi-shepherd/p/5943014.html