當前位置:軟件學堂 > 資訊首頁 > 網(wǎng)絡編程 > DIV+CSS > css字體變體font-variant

css字體變體font-variant

2012/11/23 16:51:09作者:佚名來源:網(wǎng)絡

移動端

【實例介紹】

css字體變體font-variant

fom-variant屬性用于設置小型大寫字母的字體顯示文本,這意味著所有的小寫字母均會被轉(zhuǎn)換為大寫,但是所有使用小型大寫字體的字母與其余文本相比,其字體尺寸更小。

【基本語法】

font-variant:變體屬性值

【語法介紹】

在font-variant屬性中,可以設置的值只有兩個,一個是normal,表示正常顯示,另—個是small-caps,它能將小寫的英文字母轉(zhuǎn)化為大寫字母且字體較小。

【實例代碼】

<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>無標題文檔</title> </head> <style type="text/css"> .j { font-family: "宋體"; font-size: 16px; font-variant: small-caps; }</style> </head> <body class="j"> Located at the center of the mainland's coastline, Shanghai has long been a major hub of communications, transportation, and international exchange. The municipality covers an area of 6,341 square kilometers and has a population of more than 13.5 million. Shanghai is China's largest economic comprehensive industrial base, and a famous historical and cultural city. </body> </html>

【代碼分析】

此段代碼中首先定義了font-variant屬性為small—caps,然后在正文中對文本應用j樣式,在瀏覽器中預覽效果,如圖所示,可以看到小寫的英文字母已轉(zhuǎn)變?yōu)榇髮憽?/p>

字體變體font-variant運行效果

 【素材及源碼下載】

請點擊:cs字體變體font-variant 下載本實例相關素材及源碼

 

標簽: css  字體  變體