Разная ширина символов одного шрифта в разных браузерах: почему и как пофиксить?

Question

[oink]

Добрый день, у меня проблема, которая, как мне кажется, достаточно нубская, но я никогда не сталкивался, и нагуглить тоже не смог. К странице, которую я верстаю, подключен шрифт Roboto, и почему-то в Хроме (в Safari нет возможности проверить, в остальных как надо) шрифт с четко заданными размером и высотой линии "сплющивает" по горизонтали. Причем только именно в этом месте на странице, дальше тот же шрифт везде нормален. У блока-родителя ширина auto, flex. В чем может быть проблема? На Codepen ссылку не даю, т.к. повторить не удалось, видимо, откуда-то очень издалека тянется.
Снизу Chrome, сверху FF:

Comments

[Lynn «Кофеман»]

А это точно Roboto?
Как подключён шрифт?

[Rustam Bainazarov]

Не похоже на Roboto вообще. Проверяйте подключение.

[Rustam Bainazarov]

Brad9aga, зырь:
https://s3.gifyu.com/images/ezgif-1-52992bd82c1c.gif

[Brad9aga]

Рустам Байназаров, я похожее видал уже)

[Rustam Bainazarov]

Brad9aga, я каждый его вижу. Он свербит то в левой ноздре, то в правой.

[Brad9aga]

Рустам Байназаров, хреново тебе чо))

[Rustam Bainazarov]

Brad9aga, не-не, сволочью жить хорошо.

[Brad9aga]

Рустам Байназаров, Как начать новый блок в html&css?

Answer 1

[oink]

Оказалось, что шрифт заменялся на локально установленный Roboto Condensed. Зачем, почему именно Хромом и именно в этом месте - пока загадка. Помогло удаление его из системы (пришлось еще лезть в реестр, т.к. просто через панель управления не давался).

Answer 2

[Арсений Матыцин]

Больше похоже на то, что скидывается шрифт. Проверь дебаггером (F12) и то, как подключены шрифты. Если проблема со стилями дебаггер это покажет. Да и полазив там многое можно найти по делу.

Comments

[oink]

Если бы просто шрифт не подключился, я бы заметил, думаю. Сейчас там указан font-family: "Roboto", "Arial", sans-serif. Убираю Roboto - шрифт меняется на Arial (логично). Значит, подключился нормально. Ну и визуально видно на скриншоте, что в FF и Chrome один и тот же шрифт, и его размер/высота строки корректно считываются. Сплющиваются сами символы, причем, как уже писал, именно в этом блоке. Есть ли в CSS аналог letter-spacing, который не на межбуквенное расстояние влияет, а на сами буквы? Возможно его сброс бы помог. Ах да, normalize тоже подключен.

[Арсений Матыцин]

oink, еще раз — дебаггер.

[Brad9aga]

oink,

[oink]

Brad9aga, интересно, Хром подрубает Roboto Condensed вместо обычного в этом месте. Шрифт подключен с гуглосервиса, есть кириллица и нужные font-weight...

[Brad9aga]

oink, по скриншотам тут еще не научились разгадывать косяки