CSS： 首字母字体变大时下划线不对齐的解决方法

昨天在写2017年百度ife任务六的时候遇到了一个排版问题，需要首字母字体变大的同时，下划线对齐。

        　　首先使用了 ::first-letter伪元素的选择器，将字体变大后，发现下划线没法对齐，代码如下：

<p>dddddddddd</p>

p{

    font-size: 44px;

    text-decoration: underline;

}

p:first-letter{

    font-size：80px;

}

后来改用 font-variant、text-transform 属性后解决了这个问题，代码如下；

1

2

3

4

5

6

p{

         font-size: 44px;

    text-decoration: underline;

    font-variant: small-caps; //关键属性

    text-transform: capitalize; //关键属性

1

}

  　　text-transform 属性

这个属性会改变元素中的字母大小写，而不论源文档中文本的大小写。

如果值为 capitalize，则要对某些字母大写，但是并没有明确定义如何确定哪些字母要大写，这取决于用户代理如何识别出各个 “词”。

值 描述

none 默认。定义带有小写字母和大写字母的标准的文本。

capitalize 文本中的每个单词以大写字母开头。

uppercase 定义仅有大写字母。

lowercase 定义无大写字母，仅有小写字母。

inherit 规定应该从父元素继承 text-transform 属性的值。

兼容性：

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

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

font-variant 属性

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

值 描述

normal 默认值。浏览器会显示一个标准的字体。

small-caps 浏览器会显示小型大写字母的字体。

inherit 规定应该从父元素继承 font-variant 属性的值。

兼容性:

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

。详细资料，请加群获取：586656942