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

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

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

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

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

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

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

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

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

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

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

解決方案

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

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

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

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

本條技術(shù)文章來源于互聯(lián)網(wǎng)，如果無意侵犯您的權(quán)益請點擊此處反饋版權(quán)投訴

本文系統(tǒng)來源：php中文網(wǎng)

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。