@SamFlin

Шрифты по разному ведут себя в консоли и на реальном устройстве, почему?

Здравствуйте товарищи. Ранее поднимал эту тему. Решение удалённая отладка. Но вопрос остался почему в консоли и на реальном устройстве есть разница. Порыл нет у всех эта проблема со шрифтами. Думал на line-height не подтвердилось. Может сталкивался кто или просто знает то чего не знаю я, будьте любезны поделитесь знаниями.
Скрин консоли: 645bb95ac7322642181118.jpeg
Скрин удалённой отладки: 645bb985a56bd403758917.jpeg
  • Вопрос задан
  • 54 просмотра
Пригласить эксперта
Ответы на вопрос 2
DanArst
@DanArst Куратор тега CSS
Гриффиндор в моде при любой погоде!
1) Это называется не консоль, а панель адаптивного просмотра.
2) Одни скринов не достаточно. Нужно понять как вы подключаете свой шрифт, какой браузер, ОС?
3) Возможно отсутствует глиф какого-либо символа и браузер автоматически заменяет шрифт. Из-за этого можно меняться общая картина
4) А может у вас на компе закэшировались стили и вы вообще давно заменили шрифт на другой?
Ответ написан
sfi0zy
@sfi0zy Куратор тега CSS
Creative frontend developer
Прежде, чем ломать голову над тем, проблема это в эмуляторе в Chrome или нет, стоит проверить, а воспроизводится ли проблема в других браузерах или даже в самом Chrome, если само его окно поменять в размерах. И да, воспроизводится. Текст обрезается то сверху, то снизу. Это не проблема эмулятора. Нужно смотреть логику в коде, кто смещает текст.

А в коде на некоторых разрешениях экрана вы тексту добавляете padding сверху. А на некоторых - не добавляете. Вот он и ездит вверх-вниз внутри контейнера с overflow: hidden и обрезается. А звездочкам с абсолютным позиционированием на padding все равно, они не ездят. Это то, что нужно исправить.

По поводу эмулятора в Chrome: он всегда имел сложности с единицами vh/vw. С годами его поведение менялось, но в целом все его тараканы в голове всегда можно было прибить с помощью мета тега для вьюпорта. Вы его используете только чтобы задать изначальное масштабирование, но там еще есть возможности для ограничения - minimum-scale, maximum-scale и грубое user-scalable. С ними нужно быть осторожнее в продакшене, чтобы не ломать людям доступность, но в каких-то замороченых случаях отладки можно применить, чтобы забрать у эмулятора возможность что-то масштабировать и странно трактовать единицы измерения. Но, еще раз, практика эта странная, ваше верстка должна работать без таких ограничений.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы