Почему добавление диапазонов меняет положение буквы или ширину в Chrome?

Question

Я столкнулся с интересной проблемой, которая, как мне кажется, может быть связана с Chrome или даже со шрифтом, который я использовал.

В некоторых частях этого приложения пролеты заключены в каждую буквуЧерез некоторое время.Как только это происходит, происходит небольшое смещение позиции буквы.Я не уверен, что это ширина, поля или что-то еще.Но это наиболее заметно вокруг букв «W» и «A».

В этом примере вы увидите проблему через 1 секунду, когда буквы обернуты в промежуток.

Ссылка на JS Fiddle .

setTimeout(function() {
  var wrapFinal = $(".wrap");
  wrapFinal.html(wrapFinal.text().replace(/./g, "<span>$&</span>"));
}, 1000);

.wrap {
  text-transform: uppercase;
  font-weight: 900;
  font-size: 46px;
  text-align: center;
  letter-spacing: 4px;
  white-space: nowrap;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrap">aWsdasWdWds</div>

Answer 1

Это определенно проблема кернинга.

Поскольку вы заключаете отдельные символы в span элементы, механизм шрифтов больше не будет рассматривать текст как непрерывную строку;и как это могло быть - промежутки можно отформатировать так, чтобы они появлялись где угодно или вообще исчезали в этом отношении.

Более формально говоря, элементы span будут получать для своих рендеров свои собственные блочные модели.Содержимое полей будет отображаться независимо, поэтому у текстового рендерера нет возможности использовать стратегии кернинга.

Если вы хотите, чтобы представления с span s и без него выглядели похожими друг на друга, выможно было бы попытаться мягко намекнуть двигателю кернинга, чтобы остановить то, что он делает, установив font-kerning: none.