@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. С ними нужно быть осторожнее в продакшене, чтобы не ломать людям доступность, но в каких-то замороченых случаях отладки можно применить, чтобы забрать у эмулятора возможность что-то масштабировать и странно трактовать единицы измерения. Но, еще раз, практика эта странная, ваше верстка должна работать без таких ограничений.
Ответ написан
Комментировать
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы