html - 如何防止在一个特定的地方结扎？

Question

一般来说，我喜欢连字，它们使文本更容易阅读。我想在我所有的 HTML 页面上启用它们。

但是有这个词（它是德语，是and andHanftierheft的复合词）。我不想为 连字，但我想为HanfTierHeft...nfti......eft

@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro');
body {
  font-family: 'Source Sans Pro', sans-serif;
  font-variant-ligatures: normal;
  font-size: 50px;
}

Hanftierheft

我怎样才能告诉我的浏览器通常使用连字，但不是在那个特定情况下？

Answer 1

将实体用于零宽度非连接字符，并将 HTML 代码中的单词写为Hanf‌tierheft.

@import url('https://fonts.googleapis.com/css?family=Libre+Baskerville');

body {
  font-family: 'Libre Baskerville', serif;
  font-variant-ligatures: normal;
  font-size: 50px;
}

<p>Hanf&zwnj;tierheft</p>

Answer 2

你可以使用 aspan并给它font-variant-ligatures: none;：

@import url('https://fonts.googleapis.com/css?family=Libre+Baskerville');

body {
  font-family: 'Libre Baskerville', serif;
  font-variant-ligatures: normal;
}

p {
  font-size: 50px;
}

span {
  font-variant-ligatures: none;
}

<p>Han<span>fti</span>erheft</p>