Ларюков Д.
23 сообщения
#1 месяц назад
Всем доброго времени суток
Кто нибудь наблюдает различия в заголовке с макетом версткой в разных браузерах?
Заказчик придрался к такой как я считаю мелочи, В связи с этим вопрос
я не знаю где я слышал но слышал что рендер элементов в браузере отличается от современных адаптивных макетов дизайнеров в фотошопе и фигма, кто нибудь об этом слышал или сталкивался? Или я не прав?
В последнее время часто наблюдаю такую картину по параметрам все идеально, все размеры, отступы совпадают с макетом,все шрифты тоже беру из макета...и вот вроде все совпадает но визуально отличия некоторые тоже есть, в связи с этим итоговый вопрос возможен ли 100% Pixel Perfect и если не возможен то как доказать это заказчикам и дизайнерам?
Со шрифтами вообще странная история, вроде подключаешь шрифты по макету, но заказчик не хочет принимать это ни в какую...говорю давайте свои шрифты, может проблема в том что дизайнер использовал другие файлы шрифтов, - тогда мне, нет говорит берите из макета, и никаких других файлов шрифтов не дает..
В общем кто прав кто виноват? 
Приложения:
  • 83 КБ
  • 131 КБ
  • 93 КБ
Евгений К.
712 сообщений
#1 месяц назад
Я скажу даже не как дизайнер, а как фронтендер с 10+ лет опыта - сильно отличается на скринах. 
Нужно добиваться файлов шрифтов от заказчика, если есть такая проблема и они не стандартные и не подходят с того же гугл-фонта.

В целом, так и сообщить заказчику, что из фигмы нельзя выкачать файлы шрифта, и их нужно приложить отдельно и получить от дизайнера.

А вообще, видите или слышите "pixelpefect" - бегите оттуда. Никогда ничем нормальным это не заканчивается, такие заказчики не понимают особенностей рендера в разных броузерах.
Давно я не натыкался на такие случаи ) Думал это умерло так же как ie8 в дааавние времена )
Артем Л.
11369 сообщений
#1 месяц назад
1) Каждый браузер рендерит шрифты по своему. Они будут отличаться в любом случае.
2) Шрифты должен передать отдельно дизайнер/заказчик, если это не гуглфонтс
3) Слово PixelPerfect - как красная тряпка. Сразу бежать без оглядки.
Ни разу не видел за 15 лет макетов, которые можно сделать пиксельперфект не наворачивая всяких никому не нужных бесполезных костылей.
Верстать нужно исходя из логики и здравого смысла, чтобы было максимально похоже на макет и было максимально просто поддерживать в дальнейшем стороннему разработчику. А не вот это все лишь бы было.
Ларюков Д.
23 сообщения
#1 месяц назад
Цитата (crus94):
Я скажу даже не как дизайнер, а как фронтендер с 10+ лет опыта - сильно отличается на скринах.Не
Не сочтите за невежество, но чем же? И как исправить?

Цитата (crus94):
Нужно добиваться файлов шрифтов от заказчика, если есть такая проблема и они не стандартные и не подходят с того же гугл-фонта.
А вы уверены что только в файлах дело а не в рендере все таки?

Цитата (crus94):
вообще, видите или слышите "pixelpefect" - бегите оттуда. Никогда ничем нормальным это не заканчивается, такие заказчики не понимают особенностей рендера в разных броузерах.
Ситуация была такая что узнал я об этом pixelpefect не сразу..у меня тоже таких заказчиков не очень много было, но дело в том что придирки начались совершенно внезапно

Цитата (crus94):
Давно я не натыкался на такие случаи ) Думал это умерло так же как ie8 в дааавние времена )А 
А вообще какие плюсы и минусы Pixel Perfect? Есть ли реальная польза для заказчика или это все же хотелки дизайнеров перфекционистов?
Цитата (Hungry_Hunter):
#1 час назад1) Каждый браузер рендерит шрифты по своему. Они будут отличаться в любом случае.
Почему? Как это объяснить заказчику?

Цитата (Hungry_Hunter):
2) Шрифты должен передать отдельно дизайнер/заказчик, если это не гуглфонтс
99% всех заказчиков передают макеты без шрифтов, я думаю это не только у меня такая ситуация..много жалоб со стороны коллег что им приходится искать по всему интернету эти шрифты, так что это издержки профессии

Цитата (Hungry_Hunter):
Ни разу не видел за 15 лет макетов, которые можно сделать пиксельперфект не наворачивая всяких никому не нужных бесполезных костылей.
Не могли рассказать подробнее про костыли, это нужно для того чтобы я в случае чего был в курсе..и мог аргументировать заказчику

Я только знаю что адаптивность и PP например вообще никак не вяжуться друг с другом
Евгений К.
712 сообщений
#1 месяц назад
Цитата (Random2000):
Не сочтите за невежество, но чем же? И как исправить?
Наложите в том же фотошопе друг на друга, и посмотрите на различия визуально.
Например, в хроме, судя по Вашим скринам, у вас выводится вообще другой шрифт.

Рекомендую взять шрифт у заказчика, и каким-то нормальным сервисом его сгенерить. Я пользуюсь https://transfonter.org/

Цитата (Random2000):
Ситуация была такая что узнал я об этом pixelpefect не сразу
раз не было пиксельперфект в тз - можно смело об этом говорить заказчику. )

Цитата (Random2000):
или это все же хотелки дизайнеров перфекционистов?
именно они. Как и написал Hungry_Hunter, "Верстать нужно исходя из логики и здравого смысла, чтобы было максимально похоже на макет и было максимально просто поддерживать".

Цитата:
99% всех заказчиков передают макеты без шрифтов, я думаю это не только у меня такая ситуация..много жалоб со стороны коллег что им приходится искать по всему интернету эти шрифты, так что это издержки профессии

Это не издержки профессии - это издержки неопытных фрилансеров, которые не получают всех материалов для работы. Всегда шрифты должен предоставить заказчик, в том случаи, если это не стандартные, или не гугл-фонт. 
Фавиконы вы тоже сами рисуете  ?
Артем Л.
11369 сообщений
#1 месяц назад
Цитата (Random2000):
99% всех заказчиков передают макеты без шрифтов, я думаю это не только у меня такая ситуация..много жалоб со стороны коллег что им приходится искать по всему интернету эти шрифты, так что это издержки профессии
Шрифты нужно спрашивать сразу. Если их нет - используем любые более-менее похожие из гуглфонтс.

Цитата (Random2000):
Ситуация была такая что узнал я об этом pixelpefect не сразу
Не было в тз - нет в работе. Если это не было изначально озвучено, вы можете попросить за это доплату или отказаться от работы.
В будущем сразу такие моменты уточняйте и обговаривайте.

Цитата (Random2000):
Есть ли реальная польза для заказчика
Есть. Одна и единственная. Удовлетворение своего ЧСВ :-) На этом все.

Цитата (Random2000):
Почему? Как это объяснить заказчику?
Просто так и объяснить, что каждый браузер рендерит шрифты по своему
Александр Ф.
3271 сообщение
#1 месяц назад
С Google шрифтами возможно еще такое, если не подгружается указанный шрифт по каким либо причинам (недоступен гугл сервер), то может подгрузиться альтернативный.
Совсем недавно такое было, перебил принудительно на нужный и проблема решена. А так подгружался ариал.
Тут то одно случается с глобальным интернетом, то другое.
Евгений К.
712 сообщений
#1 месяц назад
regado, с момента как пытались блокировать телеграмм - всегда начал складывать шрифты локально ) От греха подальше )

т.к. тогда лежал частично гугл у людей, и шрифты на сайтах не грузились. (а сайты грузились вечность)
Евгений Г.
172 сообщения
#1 месяц назад
Random2000, Ты скрины с правельным масштабом скинь - почему в фигме 97% а в браузере 75% как мне такое сравнивать?
Давай помогу покажеш демонстрацию может ты просто натупил гдето, а рендерятся они по разному отклонение в 1 пиксель абсолютно нормально и шрифты могут отличаться надо просить файлы на всякий случай
Ларюков Д.
23 сообщения
#1 месяц назад
Jeka2,дело в том что я не тупой! 100раз все проверил, что там можно было натупить и где? Не первый раз сайты верстаю, просто рендер браузера значит и все...какие еще аргументы можно привести заказчику чтобы не требовал PP ?
Михаил Копча
329 сообщений
#1 месяц назад
Ну тут явно дело не в рендере, видно же визуально что другой шрифт на двух скринах. А почему так по картинке можно только гадать. Пришлите ссылку в лс. 
Ничего не вижу плохого в пиксельперфекте, если нормальный макет. Всегда по нему делаю, понятное дело за исключением косяков дизайна. Несколько пикселей на мелких деталях очень могу бросаться в глаза.
Ларюков Д.
23 сообщения
#1 месяц назад
regado,гугл шрифты кто использует? Я наверно 1 макет всего лишь видел, их не используют дизайнеры! Все шрифты платные в основном!
Евгений К.
712 сообщений
#1 месяц назад
Цитата (Random2000):
гугл шрифты кто использует
Очень много кто.

Цитата:
Все шрифты платные в основном!
Ну тогда тем более его нужно запрашивать у заказчика, чтобы не нарушать лицензии.
Артем Л.
11369 сообщений
#1 месяц назад
Цитата (Random2000):
гугл шрифты кто использует?
Все нормальные дизайнеры. Нет никакой необходимости использовать другие шрифты, за исключением случаев когда речь идет о корпоративном стиле и специальном корпоративном шрифте, используемом компанией.
Андрей В.
1203 сообщения
#1 месяц назад
Цитата:
Есть. Одна и единственная. Удовлетворение своего ЧСВ :-) На этом все.
100%.
Это особый вид клиента — мерзкие человекоподобные существа
Но вы можете воспринимать онных как некий тренажер для себя, круто прокачивает коммуникацию и, пожалуй, силу воли)))

Интересный факт: чем меньше бюджет — тем больше вероятность нарваться на такого клиента.
У нормальных человеков нет времени пиксельдрочерством заниматься и мучить исполнителя, таким нужен рабочий инструмент, который будет решать определенные задачи.

Но в данном конкретном случае и я вижу расхождение с макетом, онно конечно не критично, но все же не приятно
Ларюков Д.
23 сообщения
#1 месяц назад
Могут ли файлы шрифта повредиться при распаковке архиватором не тем которым его запаковывали?
Ларюков Д.
23 сообщения
#1 месяц назад
https://habr.com/ru/company/webfont/blog/217949/
Статья про шрифты и их конвертацию..и вообще может вообще не нужно конвертировать шрифты а только использовать один формат ttf?
Александр Ф.
3271 сообщение
#1 месяц назад
Random2000, скорее он может повредиться при неполном скачивании или загрузке с обрывом. Сейчас архиваторы дружат друг с другом, винрар распаковывает винзип без проблем. Хотя может быть там у вас экзотика )))
Ларюков Д.
23 сообщения
#1 месяц назад
Ну вот все равно не понимаю ничего, сейчас заказчик например прислал шрифты, я их установил но все равно фигма их не подхватывает
Приложения:
  • 207 КБ
Александр Ц.
1020 сообщений
#1 месяц назад
На первых двух скринах шрифт не подгрузился. Ну очевидно же. И клиент тут прав. Дело не в особенностях рендеринга в фигме и браузерах, а в том, что где-то есть косяк и шрифт заложенный дизайнером не подгружается и не рендерится. 
Цитата (Random2000):
Ну вот все равно не понимаю ничего, сейчас заказчик например прислал шрифты, я их установил но все равно фигма их не подхватывает
Где вы работаете в Figma: в браузере (каком?) или в десктопном приложении? Если в браузере, то нужно установить еще FontHelper Одной установки или активации шрифтов, в отличии от дектопной версиии, будет недостаточно.