昨天在寫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"

轉載于:https://www.cnblogs.com/libin-1/p/6604489.html

總結

以上是生活随笔為你收集整理的CSS： 首字母字体变大时下划线不对齐的解决方法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。