iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 26
0
Modern Web

CSS大全閱讀筆記系列 第 26

第五章:字型(8)

  • 分享至 

  • xImage
  •  
  1. 字型變體:
    a. font-variant可以定義字型資訊中內含的合字、較小的大寫字、分數、數字間距、數字零中包含斜槓等功能,這個屬性分為兩部分,最基礎的是font-variant,支援度較高,在CSS3之後又定義了衍伸的font-variant-*,像是font-variant-ligatures,這部分在使用前建議查詢支援度。
    b. 使用font-variant或衍伸的font-variant-*來定義字型的變體,預設值是normal,可以作用於所有元素,會繼承親代元素的值,當字型檔中沒有提供與設定值關鍵字相對應的字型變體樣式時,font-variant沒有任何的作用。使用時,寫作font-variant: normal;
    c. 因為屬性值眾多,因此不管是使用font-variant或是font-variant-*,在使用前建議查詢字型文件,確定字型有設定該關鍵字的變體字貌。
    d. 即使某個字體使用font-variant或衍伸的font-variant-*在瀏覽器上顯示了獨特的效果,但只要一更換字體,就會造成不同效果,甚至在同一字體上,不同的瀏覽器也可能會造成不同效果,或者瀏覽器不支援該關鍵字或衍伸的font-variant-*屬性。
    e. font-variant的設定值:
    - normal:為預設值,顯示正常字體,寫作font-variant: normal;
    - small-caps:較小的大寫字,讓大寫字母的高度只有小寫字的高度,支援度高,寫作font-variant: small-caps;
    f. font-variant-*的設定值:
    - font-variant: none;:關掉所有的字型變體設定。
    - font-variant-ligatures:控制合字,預設值是normal,代表使用正常呈現時會需要用到的合字,可以設定none關閉所有合字設定,其他的設定值分為三大類,common-ligatures是最一般的合字,常用在fi或ffi之間的合字,要取消用no-common-ligaturesdiscretionary-ligatures是根據字型設計者來決定合字的地方與樣式,取消使用no-discretionary-ligatureshistorical-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(手機和桌機版)上不支援,需要使用的時候注意支援度。

(字型變體未完)


上一篇
第五章:字型(7)
下一篇
第五章:字型(9)
系列文
CSS大全閱讀筆記30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言