《 CSS Secrets 》是 @Lea Verou 最新著作，這本書講解了有關于CSS中一些小秘密。是一本CSSer值得一讀的一本書，經過一段時間的閱讀，我、@南北和@彥子一起將在W3cplus發布一系列相關的讀后感，與大家一起分享。

和人一樣，不是所有的字形放在一起的時候都可以顯得很自然。例如，對于大多數襯線字體的 f 和 i 而言。字母 i 上邊的小點經常和 f 中的橫線重疊，使得它們的組合看起來非常笨拙。

為了解決這個問題，類型設計師經常會在他們的字體中添加額外的字符，稱為連字符。這些都是單獨設計的字形的二聯體或三聯體，用于排版方案中當對應的字符彼此相鄰時。例如，如上圖中的一些常見的連體字母，它們看起來比之前對應字符單獨放在一起的時候好了很多。

還有一些所謂的自由連體字“discretionary ligatures”：

事實上，對于不起眼的 & 符號，我們都知道并且喜歡把它作為字母 e 和字母 t 的連寫(“et”在拉丁文中表示“and”)。

它被設計成一個另類的風格，而不是因為它們的等價字符對相鄰時出了問題。

但是，瀏覽器從來不會默認使用自由連體字(盡管這是正確的)，并往往不會使用常見的連字體(這是一個bug)。事實上，直到最近，顯式使用任何連寫字的唯一方法就是使用它的等效Unicode字符——如， ? 表示 fi 連寫。這種方法比解決問題帶來了更大的麻煩： 很明顯，它使得這些標簽很難被閱讀，也很難編寫(能知道 de?ne 是什么意思純屬運氣)。

如果當前字體不包含這個連寫字符，結果將是亂七八糟的(如下圖所示)。

不是每個連寫字都有一個等同的、標準的Unicode字符。例如， ct 連寫字不對應任何的Unicode字符，所有包括它的字體都需要把它放置在Unicode PUA(私人使用區域)塊中。

它會打破文本的可訪問性，如復制/粘貼，搜索，和語音轉換。很多應用都可以非常智能地處理這些，都不是所有都可以。它甚至可以打破一些瀏覽器的搜索。

所以，在這種時候，總需要一個更好的方法，對吧？

解決方案

在 CSS3 的中， font-variant 可以被轉換成 shorthand ，包含了很多新的 longhand 屬性。其中之一是 font-variant-ligatures ，特別為連寫的開啟和關閉而設計的。要打開所有可能的連寫字，你需要使用三個標識符： font-variant-ligatures: common-ligatures discretionary-ligatures historical-ligatures;

該屬性是可繼承的。你可能會發現自由連體字“discretionary ligatures”妨礙可讀性，想要把它們關掉。在這種情況下，你可能希望只打開常用的連寫字： font-variant-ligatures: common-ligatures;

你甚至可以明確地把其它兩種連寫字關閉： font-variant-ligatures: common-ligatures no-discretionary-ligatures no-historical-ligatures;

font-variant-ligatures 還接受 none 值，就是完全把連寫字關閉。不要使用 none 值，除非你知道自己設置的是什么。要把 font-variant-ligatures 重置為初始值，你需要使用 normal ，而不是 none 。

本條技術文章來源于互聯網，如果無意侵犯您的權益請點擊此處反饋版權投訴

本文系統來源：php中文網

總結

以上是生活随笔為你收集整理的html css怎么连在一起,CSS秘密花园：连体字母_html/css_WEB-ITnose的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。