iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 30
0
Modern Web

CSS Secrets 導讀系列 第 30

Secret 24: 合字

  • 分享至 

  • xImage
  •  

Ligature中文叫「合字」,在中文裡比較少見,它的介紹請見維基百科.

Ligatures在網頁字型不常用到,但是用了它會讓排版比較好看,以前要實現ligatures,需要手動插入Unicode&#xfb01來代表 fi 的ligature。不過這樣做會造成一些麻煩。

  • 首先Unicode讓HTML難以閱讀和難以書寫,不查文件的話誰知道&#xfb01是什麼?
  • 如果使用者沒有支援ligature的字型,瀏覽器會用其他字型替代,那樣網頁會看起來像壞人寄的勒索信
  • 並非所有的ligature都有對應的Unicode
  • Ligature會造成文字copy/paste和搜尋上的麻煩,有些文字編輯器沒有那麼聰明能轉換為對應的字母。

在CSS Fonts Level 3裡,font-variant被改成是一個shorthand,包含許多long-hand屬性,其中一項就是font-variant-ligatures,設計成為網頁是否使用ligature的開關。要使用所有的ligatures,我們只要用三個值:

font-variant-ligature: common-ligatures discretionary-ligatures historical-ligatures;

這個屬性能被繼承,如果覺得discretionary ligatures不易閱讀,可以關掉它,如此只要註明common ligatures一個值就好。

font-variant-ligature: common-ligatures;

甚至我們也可以明確的關掉其它二種ligatures:

font-variant-ligature: common-ligatures no-discretionary-ligatures no-historical-ligatures;

font-variant-ligature也能接受none這個值,這樣就會把所有的ligatures都關掉。除非你知道你在幹什麼,不然不要這麼做。要重置ligature設定,用normal而不是none的關鍵字。

在春聯上的「招財進寶」和網路流行的「嫑」應該算是中文的合字吧?


上一篇
Secret 23: 調整 TAB 的寬度
系列文
CSS Secrets 導讀30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言