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"