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

Вообще мне нравятся лигатуры, они облегчают чтение текстов. Я хочу включить их на всех моих 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

Как я могу указать своему браузеру использовать лигатуры в целом, но не в этом конкретном случае?


html css utf-8 ligature
person slartidan    schedule 18.05.2018    source источник

Ответы (2)


arrow_upward
3
arrow_downward

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

person Tanner Swett    schedule 18.05.2018
comment
Большое спасибо - это так! Я повторно использовал потрясающий пример кода @Maharkus, чтобы получить рабочий пример для вашего решения. - person slartidan; 18.05.2018

arrow_upward
1
arrow_downward

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

person Maharkus    schedule 18.05.2018
comment
Спасибо за этот замечательный пример кода! Я повторно использовал его, чтобы сделать мой вопрос более ясным. - person slartidan; 18.05.2018
comment
@slartidan Нет проблем. Но разве это не решает вашу проблему? - person Maharkus; 18.05.2018
comment
Я предполагаю, что тег промежуточного диапазона может быть препятствием для поисковых систем и т. д. Однако у меня пока нет веских доказательств этого. В любом случае: это простое для понимания рабочее решение моей проблемы! - person slartidan; 18.05.2018
comment
Ну, без изменения HTML я не вижу никаких решений, которые не были бы невероятно запутанными, ха. Может быть, есть способ использовать Javascript. - person Maharkus; 18.05.2018