font-variant
可以定義字型資訊中內含的合字、較小的大寫字、分數、數字間距、數字零中包含斜槓等功能,這個屬性分為兩部分,最基礎的是font-variant
,支援度較高,在CSS3之後又定義了衍伸的font-variant-*
,像是font-variant-ligatures
,這部分在使用前建議查詢支援度。font-variant
或衍伸的font-variant-*
來定義字型的變體,預設值是normal
,可以作用於所有元素,會繼承親代元素的值,當字型檔中沒有提供與設定值關鍵字相對應的字型變體樣式時,font-variant
沒有任何的作用。使用時,寫作font-variant: normal;
。font-variant
或是font-variant-*
,在使用前建議查詢字型文件,確定字型有設定該關鍵字的變體字貌。font-variant
或衍伸的font-variant-*
在瀏覽器上顯示了獨特的效果,但只要一更換字體,就會造成不同效果,甚至在同一字體上,不同的瀏覽器也可能會造成不同效果,或者瀏覽器不支援該關鍵字或衍伸的font-variant-*
屬性。font-variant
的設定值:normal
:為預設值,顯示正常字體,寫作font-variant: normal;
。small-caps
:較小的大寫字,讓大寫字母的高度只有小寫字的高度,支援度高,寫作font-variant: small-caps;
。font-variant-*
的設定值:font-variant: none;
:關掉所有的字型變體設定。font-variant-ligatures
:控制合字,預設值是normal
,代表使用正常呈現時會需要用到的合字,可以設定none
關閉所有合字設定,其他的設定值分為三大類,common-ligatures
是最一般的合字,常用在fi或ffi之間的合字,要取消用no-common-ligatures
。discretionary-ligatures
是根據字型設計者來決定合字的地方與樣式,取消使用no-discretionary-ligatures
。historical-ligatures
是使用古書中合字的樣式,可用no-historical-ligatures
取消,contextual
是根據上下文決定是否需要合字,no-contextual
可以取消。font-variant-ligatures
在IE和Edge上不支援,需要使用的時候注意支援度。font-variant-caps
:控制大小寫呈現,預設值是normal
,代表按照網頁設計者設計的大小寫樣貌直接呈現,等同於關閉此設定。其他設定值有small-caps
,代表小寫字母保持原大寫字母一半的高度轉為大寫字。all-small-caps
則代表所有字母皆變成原大寫字母高度的一半,且全部轉為大寫字母。petite-caps
則設定小寫字母全部轉為大寫字。all-petite-caps
則所有字母皆轉為大寫字,且高度相同。unicase
允許大小寫混合,但大寫字母只有小寫字母f的一半高度。titling-caps
是專門用在標題排版上的,讓標題大小寫混用時大寫字不會過於搶眼。font-variant-caps
在IE、Edge和Safari(手機和桌機版)上不支援,需要使用的時候注意支援度。(字型變體未完)