iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 27
0
Modern Web

CSS大全閱讀筆記系列 第 27

第五章:字型(9)

  • 分享至 

  • xImage
  •  

(接上篇的字型變體部分)


  1. 字型變體:
    f. font-variant-*的設定值:
    - font-variant-numeric:這個屬性是控制數字字型的呈現,預設值為normal,表示按照設計直觀顯示,等同於關閉這個所有相關設定。ordinal可以讓數字呈現序數呈現,如1st、2nd(後兩個字母上標呈現)。slashed-zero可以讓0變成帶有斜線的0,在區分英文字母O和數字0時特別好用。其他數值可以再分為三大類,第一種是關於整體數字本身的樣式,lining-nums可以讓數字顯示成襯裡樣式數字,這種數字高度一致,且排列時會在同一水平線上,而oldstyle-nums會呈現舊式數字樣式,這種數字不會在同一水平線上排列。第二種是專門用於分數上的,diagonal-fractions會讓斜線表示的分數分母變成像下標字,分子變成像上標字,斜線也會變長分隔,stacked-fractions會讓分數分子在上,分母在下,並且用水平線分隔。最後一組是和數字間距相關,proportional-nums會讓數字按照字元本身設定的寬度來表現,因此每個數字字元寬度不會相等,而tabular-nums會讓數字字元的寬度相等,便於排版。font-variant-numeric在使用時,要注意支援度,IE瀏覽器是不支援的,而Edge較舊的版本也不支援。
    - font-variant-alternates:這個屬性是控制字元的取代替換,讓某些部分依照設計者的要求換成其他的字貌。預設值是normal,,表示正常顯示,等同於關閉這個所有相關設定。historical-forms代表使用已經不常使用的字貌取代某些字元。stylistic()代表單個字元的樣式替換,通常以數字表示。styleset()則是啟用字符集的樣式替換,一樣是以數字表示。character-variant()類似於styleset(),但不會為一組字符建立連貫的字貌,每個字符會具有獨立且不一定一致的樣式。swash()會將字元取代成相對應的斜體字。ornaments()會使用裝飾字來取代,因此建議使用與內容不相關的字符。annotation()則會替換成項目列表的標示符號,例如①。另外,font-variant-alternates在支援度上,暫時只有Firefox和Safari(桌機和手機版)支援。

(字型變體未完)


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

尚未有邦友留言

立即登入留言