首字母字號(hào)變大而不影響其下劃線粗細(xì)的方法

發(fā)布時(shí)間：2020-06-27 02:55:39 來(lái)源：網(wǎng)絡(luò) 閱讀：913 作者：FrontDream 欄目：開發(fā)技術(shù)

目的樣式：全部大寫字母，帶下劃線，第一個(gè)字母24px，其余字母略小，約19px。

Html標(biāo)簽：

<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;    /*關(guān)鍵樣式*/
text-transform: capitalize;  /*關(guān)鍵樣式*/  
}

text-transform 屬性

這個(gè)屬性會(huì)改變?cè)刂械淖帜复笮?，而不論源文檔中文本的大小寫。如果值為 capitalize，則要對(duì)某些字母大寫，但是并沒(méi)有明確定義如何確定哪些字母要大寫，這取決于用戶代理如何識(shí)別出各個(gè)“詞”。

值	描述
none	默認(rèn)。定義帶有小寫字母和大寫字母的標(biāo)準(zhǔn)的文本。
capitalize	文本中的每個(gè)單詞以大寫字母開頭。
uppercase	定義僅有大寫字母。
lowercase	定義無(wú)大寫字母，僅有小寫字母。
inherit	規(guī)定應(yīng)該從父元素繼承 text-transform 屬性的值。

兼容性：

瀏覽器兼容：IE、Firefox、Chrome、Safari、Opera

注釋：任何的版本的 Internet Explorer （包括 IE8）都不支持屬性值 "inherit"。所有瀏覽器都支持 text-transform 屬性。

font-variant 屬性

設(shè)置小型大寫字母的字體顯示文本，這意味著所有的小寫字母均會(huì)被轉(zhuǎn)換為大寫，但是所有使用小型大寫字體的字母與其余文本相比，其字體尺寸更小。(意味著已經(jīng)使用大寫字母的文本字體會(huì)更大)。

值	描述
normal	默認(rèn)值。瀏覽器會(huì)顯示一個(gè)標(biāo)準(zhǔn)的字體。
small-caps	瀏覽器會(huì)顯示小型大寫字母的字體。
inherit	規(guī)定應(yīng)該從父元素繼承 font-variant 屬性的值。

兼容性:

IE	Firefox	Chrome	Safari	Opera

所有主流瀏覽器都支持 font-variant 屬性。

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

向AI問(wèn)一下細(xì)節(jié)

首字母字號(hào)變大而不影響其下劃線粗細(xì)的方法

瀏覽器兼容：IE、Firefox、Chrome、Safari、Opera

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽

瀏覽器兼容：IE、Firefox、Chrome、Safari、Opera