https://mikeozornin.ru/blog/tags/ligatury/ Главная · Блог · Работы · Михаил Озорнин ru E2 (v3798; Aegea) Михаил Озорнин Главная · Блог · Работы · 145 https://mikeozornin.ru/blog/all/tinkoff-nbsp/ Fri, 22 May 2020 01:54:58 +0300 Михаил Озорнин https://mikeozornin.ru/blog/all/tinkoff-nbsp/ <p class="lead">Ночная история про профессиональный заскок, сафари и Тинькофф.</p> <p><aside class="aside-margin-right">Исходный твиттер-тред: <a href="https://twitter.com/mikeozornin/status/1261054050453401602">https://twitter.com/mikeozornin/status/1261054050453401602</a></aside></p> <p>Изначально это был твиттер-тред, но для истории я перенес его в блог.</p> <p>Вижу, что на странице Тинькофф какой-то конский пробел между Tinkoff и Black, очевидно так не должно быть. (только в сафари, в других браузерах все ок).</p> <div class="e2-text-picture"> <img src="https://mikeozornin.ru/blog/pictures/tinkoff-nbsp-1@2x.jpg" width="371" height="164" alt="" /> </div> <p>Смотрю в код, там неразрывный пробел, меняю на обычный — все становится отлично.</p> <div class="e2-text-picture"> <img src="https://mikeozornin.ru/blog/pictures/tinkoff-nbsp-2@2x.jpg" width="404" height="321" alt="" /> </div> <p>Ну, понятно, дело в символе неразрывного пробела, который как-то не так сделали в шрифте. Добавляю для проверки второй раз Black через неразрывный пробел, но нет — все нормально.</p> <p>Интересно…</p> <div class="e2-text-picture"> <img src="https://mikeozornin.ru/blog/pictures/tinkoff-nbsp-3@2x.jpg" width="529" height="186" alt="" /> </div> <p><aside class="aside-margin-right">Можете проверить инспектором:</p> <pre>ff&amp;nbsp;B | fi&amp;nbsp;B | fl&amp;nbsp;B | ft&amp;nbsp;B | tt&amp;nbsp;B |</pre> <p></aside></p> <p>Пытаюсь понять, в чем разница, вижу, что ff — одна из стандартных лигатур, может быть дело именно в лигатуре? Пробую остальные — бинго, это они.</p> <div class="e2-text-picture"> <img src="https://mikeozornin.ru/blog/pictures/tinkoff-nbsp-4@2x.jpg" width="512" height="172" alt="" /> </div> <p>Для окончательной проверки отключаю лигатуры заклинанием:</p> <pre>font-variant-ligatures: none;</pre> <p> <br /> Все пробелы выравниваются.</p> <div class="e2-text-picture"> <img src="https://mikeozornin.ru/blog/pictures/tinkoff-nbsp-5@2x.jpg" width="494" height="110" alt="" /> </div> <p>Почему так не знаю (скорее всего баг в сафари), но любопытство удовлетворил. Дизайнеры Тинькофф, вы, видимо, в хроме сидите?</p>