如何在一个特定的地方防止连字？

Question

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

然而有一个词Hanftierheft（它是德语，Hanf和Tier和Heft的复合词）。我不想要...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

使用 zero-width non-joiner 字符的实体，并将 HTML 代码中的单词写为 Hanf&zwnj;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

你可以用一个span然后给它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>

如何在一个特定的地方防止连字？

How to prevent a ligature at one, specific place?

html

css

utf-8

ligature