如何在網頁標籤中停用單一連字，同時保留其他連字

若要在網頁標籤中停用某一處連字，請將該處字母包在行內 span 中，並在該處停用相關的連字功能。其他文字會保留原有設定。CSS 沒有通用開關可在整個字型中停用某個指定連字。MDN 的連字控制項定義的是功能類別，而非個別替換。

本指南適用於使用 Mac 編輯網頁 HTML 和 CSS 的使用者。具體任務是將合成標籤 fine flake office fine 中第一個 fi 分開，同時讓其餘文字保留連字。透過簡單的本機測試，可以看出只變更某一處和變更整項功能的差異。

CSS 可以選擇性停用什麼？

一項連字功能可能包含多種替換。停用 liga，表示對受影響的文字停用該項功能；這不代表能選取某一組特定字母。同樣地，font-variant-ligatures: no-common-ligatures 會透過 liga 和 clig 控制常見連字。實際替換內容取決於字型。MDN：font-variant-ligatures

有用的區別在於設定套用的位置和設定控制的字型功能。即使功能本身包含許多連字，你仍可透過標記將設定範圍縮小到兩個字母。這樣就能在單一出現位置套用變通方式，無須整個字型的排除開關。

預期結果	合適做法	條件
分開 `fi` 的某一處	將該處包起來，並在局部停用其功能	你可以編輯標記
移除任意連字，但保留常見連字	在指定元素上使用 `no-discretionary-ligatures`	不需要的替換屬於 `dlig`
移除所有 `fi`，但保留其他常見連字	若有文件記載的字型專屬功能，則使用該功能	字型必須提供必要的控制項
在無法編輯的應用程式中變更某一處	查閱該應用程式文件，尋找字元層級的格式設定	網頁 CSS 無法說明桌面應用程式支援什麼

對支援的類別，優先使用 font-variant-ligatures。MDN 建議可用時採用較高層級的字型屬性；其他情況則可使用 font-feature-settings 存取較低層級的 OpenType 功能。撰寫 font-feature-settings: \"liga\" off 並不會增加針對特定字母組合的控制能力。MDN：font-feature-settings

在 Mac 上進行本機比較

先使用獨立檔案，這樣就能在沒有其他頁面樣式干擾的情況下比較結果。在 TextEdit 中選擇 檔案 > 新增，然後選擇 格式 > 製作純文字。輸入下方完整範例，將檔案儲存為 ligature-demo.html，若出現提示則選擇 使用 .html。這是 Apple 文件記載的在 TextEdit 中建立 HTML 檔案步驟。Apple：在 Mac 上使用 TextEdit 處理 HTML 文件

在瀏覽器中開啟儲存的檔案。此範例使用本機可用的字型，不需要函式庫或下載。字型清單僅供示意：只有在所選字型包含相關連字時，才會呈現可見差異。以瀏覽器中的呈現結果作為測試；不預設特定字形外觀。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Ligature comparison</title>
  <style>
    body {
      margin: 2rem;
      color: #222;
      background: #fff;
      font-family: system-ui, sans-serif;
    }

    main {
      max-width: 42rem;
    }

    .sample {
      font-family: Georgia, "Times New Roman", serif;
      font-size: 2.5rem;
      line-height: 1.5;
      letter-spacing: normal;
      font-variant-ligatures: common-ligatures;
    }

    .separate-pair,
    .all-common-off {
      font-variant-ligatures: no-common-ligatures;
    }
  </style>
</head>
<body>
  <main>
    <h2>Baseline</h2>
    <p class="sample">fine flake office fine</p>

    <h2>First pair separated</h2>
    <p class="sample"><span class="separate-pair">fi</span>ne flake office fine</p>

    <h2>All common ligatures disabled</h2>
    <p class="sample all-common-off">fine flake office fine</p>
  </main>
</body>
</html>

中間一列的 span 包含目標 fi 的兩個字母。該列其餘部分沿用常見連字設定。對於純粹為了樣式而分組的內容，span 很合適：WHATWG 將它定義為一種表示其子元素、但本身不增添意義的元素。WHATWG：span 元素

依下列三個步驟檢視比較結果：

比較基準列和中間列中的第一個 fine。觀察字母形狀，而不只看整體寬度。
比較這兩列中的 flake、office 和最後一個 fine。它們位於例外範圍之外，應保留原有功能設定。
將最下方一列與其他列比較。這是範圍較大的對照組：該列的常見連字會全部停用。

如果三列看起來完全相同，這項比較就無法得出結論。請將範例字型改成你實際打算使用的字型，並選擇該字型文件中列有連字的字母組合。CSS 宣告無法呈現所選字型未提供的替換。

套用例外而不影響文字流

對於短標籤，請將 span 直接放在要分開的完整字串外層。前後字元在原始碼中保持相鄰，如範例中的 fi 和 ne。不要只為了讓標記更容易閱讀，就在單字中插入空格或換行。

span 必須變更功能設定。只把一個字母放進原本沒有樣式的 span，並不是可靠的連字中斷方式：W3C 的文字規範要求，若沒有有效的格式變更，塑形應跨越行內元素邊界繼續進行。規範也定義了邊界、框線、內距或其他格式會中斷塑形的情況。W3C：跨元素邊界的塑形

請將這個例外保留為一般行內 span。加入 inline-block、間距或版面配置包裝元素，會帶來此任務不需要的額外版面設定。套用字體排印設定後，縮窄瀏覽器視窗，並在預期容器中檢查標籤。請留意換行是否維持不變，因為不同字形可能改變文字所佔的空間。

對於較長的字串，請明確決定預期的邊界。如果不需要的替換涉及 ffi，只包住 fi 也會在較大字串內建立格式邊界。請測試完整單字和相鄰字母，不要假設所有重疊的替換都會彼此獨立運作。

將範例套用到現有頁面時，請編輯來源碼或元件中相關的標籤。不要只為了加入一個例外，就從可見文字重建整個段落；請保留現有連結、強調格式和元素結構。本範例刻意處理一個已知位置，而不會嘗試在任意頁面中自動替換。

如果連字仍存在，或其他連字消失了，怎麼辦？

請依序使用此比較進行診斷，先不要立即加入更多覆寫設定。

首先，檢查功能類別。 此範例針對常見連字。如果字型文件將不需要的替換歸在 dlig，請改為對例外套用 no-discretionary-ligatures。上下文替換可能涉及 calt，並由 no-contextual 控制；該設定可能影響所選文字中的其他上下文形式。MDN 的功能類別定義

接著，檢查是否有相互衝突的設定。 現有的 font-feature-settings 宣告可能會覆寫 font-variant-ligatures 所暗示的功能選擇。W3C 規定，在功能解析期間會較晚套用低階功能設定。判斷 span 做法不受支援之前，請先檢查該宣告。W3C：字型功能與變體解析

然後，檢查範圍。 如果其他單字的連字也消失了，請確認例外類別只套用在目標 span 上。套用到段落或其容器的設定，會影響大得多的文字範圍。本機範例中的最下方一列刻意呈現這種較廣泛的結果。

最後，區分選用的字體排印和必要的塑形。 font-variant-ligatures: none 的範圍超出此任務所需，而且必要連字不受其停用控制項影響。W3C 明確規定，此屬性會保留必要連字。W3C：連字

如果目標是在所有位置移除某一種連字，就必須對每一個預期位置套用局部 span 技巧。字型專屬功能或許能提供更簡潔的解決方式，但其標籤和效果必須以該字型的文件為準。不要假設不同字型中的樣式集編號代表相同意義。

塑形函式庫能提供更精細的控制嗎？

HarfBuzz 透過 hb_feature_t 提供功能範圍：功能包含標籤、值、含起始位置但不含結束位置的範圍，並以群集值表示。呼叫塑形函式庫的應用程式可藉此對有限範圍套用功能設定。不過，這個範圍仍是某項功能的範圍，而非可通用選取某個指定連字的選擇器。HarfBuzz：hb_feature_t

這個 API 所在的層級與一般網頁 CSS 不同。HarfBuzz 的文件機制會將功能要求傳遞給 hb_shape()。其中的範例說明塑形緩衝區和字型查找規則，而非新增瀏覽器樣式表選項。對這項 Mac 網頁標籤任務而言，導入自訂塑形流程會超出行內例外的需求。HarfBuzz：OpenType 功能

最後，請在標籤實際顯示寬度下，檢查目標字母組合、周圍的連字和標籤本身。只保留最精簡且有效的例外：將完整的不需要字串放在一個 span 中，在該處停用適當功能，並讓其餘文字保留預期設定。