1. Web
  2. CSS
  3. font-variant-ligatures

font-variant-ligatures

Baseline 已廣泛支援

此特性已相當成熟，可在許多裝置和瀏覽器版本上使用。自 ⁨2020 年 1 月⁩ 起，所有主流瀏覽器均已支援。

font-variant-ligatures CSS 屬性控制元素文字內容中使用的連字和上下文形式。這使得最終文字中的字型形式更加協調。

試一試

font-variant-ligatures: normal;

font-variant-ligatures: no-common-ligatures;

font-variant-ligatures: common-ligatures;

<section id="default-example">
  <div id="example-element">
    <p>Difficult waffles</p>
  </div>
</section>

@font-face {
  font-family: "Fira Sans";
  src:
    local("FiraSans-Regular"),
    url("/shared-assets/fonts/FiraSans-Regular.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
}

section {
  font-family: "Fira Sans", sans-serif;
  margin-top: 10px;
  font-size: 1.5em;
}

語法

css
/* Keyword values */
font-variant-ligatures: normal;
font-variant-ligatures: none;
font-variant-ligatures: common-ligatures; /* <common-lig-values> */
font-variant-ligatures: no-common-ligatures; /* <common-lig-values> */
font-variant-ligatures: discretionary-ligatures; /* <discretionary-lig-values> */
font-variant-ligatures: no-discretionary-ligatures; /* <discretionary-lig-values> */
font-variant-ligatures: historical-ligatures; /* <historical-lig-values> */
font-variant-ligatures: no-historical-ligatures; /* <historical-lig-values> */
font-variant-ligatures: contextual; /* <contextual-alt-values> */
font-variant-ligatures: no-contextual; /* <contextual-alt-values> */

/* Two keyword values */
font-variant-ligatures: no-contextual common-ligatures;

/* Four keyword values */
font-variant-ligatures: common-ligatures no-discretionary-ligatures
  historical-ligatures contextual;

/* Global values */
font-variant-ligatures: inherit;
font-variant-ligatures: initial;
font-variant-ligatures: revert;
font-variant-ligatures: revert-layer;
font-variant-ligatures: unset;

font-variant-ligatures 屬性被指定為 normal、none，或一個或多個下面列出的其他值型別。多個值之間用空格分隔。

值

normal

此關鍵字啟用正確渲染所需的常用連字和上下文形式。啟用的連字和形式取決於字型、語言和指令碼型別。這是預設值。

none

此關鍵字指定停用所有連字和上下文形式，即使是常見的形式。

<common-lig-values>

這些值控制最常見的連字，例如 fi、ffi、th 或類似情況。它們對應於 OpenType 值 liga 和 clig。有兩種可能的值：

  • common-ligatures 啟用這些連字。請注意，關鍵字 normal 也會啟用這些連字。
  • no-common-ligatures 停用這些連字。
<discretionary-lig-values>

這些值控制特定於字型並由字型設計師定義的特定連字。它們對應於 OpenType 值 dlig。有兩種可能的值：

  • discretionary-ligatures 啟用這些連字。
  • no-discretionary-ligatures 停用這些連字。請注意，關鍵字 normal 通常會停用這些連字。
<historical-lig-values>

這些值控制歷史上在舊書中使用的連字，例如德語中的 tz 二合字母顯示為 ꜩ。它們對應於 OpenType 值 hlig。有兩種可能的值：

  • historical-ligatures 啟用這些連字。
  • no-historical-ligatures 停用這些連字。請注意，關鍵字 normal 通常會停用這些連字。
<contextual-alt-values>

這些值控制字母是否適應其上下文——也就是說，它們是否適應周圍的字母。這些值對應於 OpenType 值 calt。有兩種可能的值：

  • contextual 指定使用上下文替代項。請注意，關鍵字 normal 通常也會啟用這些連字。
  • no-contextual 阻止它們的使用。

正式定義

初始值normal
應用於所有元素和文字。它也適用於 ::first-letter 和 ::first-line。
繼承性是
計算值同指定值
動畫型別離散

正式語法

font-variant-ligatures = 
  normal                                              |
  none                                                |
  [ <common-lig-values> || <discretionary-lig-values> || <historical-lig-values> || <contextual-alt-values> ]  

<common-lig-values> = 
  common-ligatures     |
  no-common-ligatures  

<discretionary-lig-values> = 
  discretionary-ligatures     |
  no-discretionary-ligatures  

<historical-lig-values> = 
  historical-ligatures     |
  no-historical-ligatures  

<contextual-alt-values> = 
  contextual     |
  no-contextual

示例

設定字型連字和上下文形式

HTML

html
<link href="//fonts.googleapis.com/css?family=Lora" rel="stylesheet" />
<p class="normal">
  normal<br />
  if fi ff tf ft jf fj
</p>
<p class="none">
  none<br />
  if fi ff tf ft jf fj
</p>
<p class="common-ligatures">
  common-ligatures<br />
  if fi ff tf ft jf fj
</p>
<p class="no-common-ligatures">
  no-common-ligatures<br />
  if fi ff tf ft jf fj
</p>
<p class="discretionary-ligatures">
  discretionary-ligatures<br />
  if fi ff tf ft jf fj
</p>
<p class="no-discretionary-ligatures">
  no-discretionary-ligatures<br />
  if fi ff tf ft jf fj
</p>
<p class="historical-ligatures">
  historical-ligatures<br />
  if fi ff tf ft jf fj
</p>
<p class="no-historical-ligatures">
  no-historical-ligatures<br />
  if fi ff tf ft jf fj
</p>
<p class="contextual">
  contextual<br />
  if fi ff tf ft jf fj
</p>
<p class="no-contextual">
  no-contextual<br />
  if fi ff tf ft jf fj
</p>

CSS

css
p {
  font-family: "Lora", serif;
}
.normal {
  font-variant-ligatures: normal;
}

.none {
  font-variant-ligatures: none;
}

.common-ligatures {
  font-variant-ligatures: common-ligatures;
}

.no-common-ligatures {
  font-variant-ligatures: no-common-ligatures;
}

.discretionary-ligatures {
  font-variant-ligatures: discretionary-ligatures;
}

.no-discretionary-ligatures {
  font-variant-ligatures: no-discretionary-ligatures;
}

.historical-ligatures {
  font-variant-ligatures: historical-ligatures;
}

.no-historical-ligatures {
  font-variant-ligatures: no-historical-ligatures;
}

.contextual {
  font-variant-ligatures: contextual;
}

.no-contextual {
  font-variant-ligatures: no-contextual;
}

結果

規範

規範
CSS 字型模組第 4 級
# font-variant-ligatures-prop

瀏覽器相容性

另見

幫助改進 MDN

瞭解如何貢獻

本頁面最後由MDN 貢獻者於修改。

在 GitHub 上檢視此頁面 • 報告此內容的問題
© . Content available under a Creative Commons license.