Как предотвратить лигатуру в одном конкретном месте?

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

Вы можете использовать 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>

Answer 2

Используйте сущность для символа, не являющегося составной частью , и введите слово в своем 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>