Попиксельная верстка и Arial regular в фотошоп и браузере

[Zverushka]

Я верстаю макет номер 5 с этого сайта http://divhack.com/. Пытаюсь сделать "попиксельную" верстку, так как настоящий профессионал должен уметь верстать попиксельно.

Выбираю основной шрифт, который указан в макете, а именно Arial 12px и мой основной текст, который идет после "Why choose WebOnDemand?" выходит на одну строку больше, чем в шаблоне! В итоге ни о какой попиксельной верстке не может идти и речи. Делаю свой макет прозрачным и накладываю на шаблон psd и получается все вразнобой, ничего не сходится. Вы там же можете открыть сделанный сайт в html и сравнить с шаблоном - у автора сайта тоже не сходится и текст вылазит на следующую строку.

Допустим мой заказчик скажет - сверстай вот этот шаблон попиксельно. Я ему выдан свое чудо, он его наложит на макет и не увидит нужного результата.И скажет - что вы мне тут наделали?

И что, спрашивается делать? Как быть? Как сделать шрифт таким же?

Edited March 25, 2013 by Zverushka

[Great Rash]

так как настоящий профессионал должен уметь верстать попиксельно.

Не, не должен

[Viper]

Пытаюсь сделать "попиксельную" верстку, так как настоящий профессионал должен уметь верстать попиксельно.

Если говорить про Pixel Perfect в верстке, то обычно, подразумеваться попиксельное соответствие размеров блоков, отступов чего-либо и тд., но не шрифтов и учитывать, что текст будет "растягивать" блоки. Заказчику нужно это объяснять, если он услышал модное слово и захотел его поддержку.

Edited March 25, 2013 by Viper

[skygazer]

Не люблю я пиксель перфект, самая муторная часть вёрстки.

[Zverushka]

А как заказчик будет сверять, когда текст расползется? По очереди каждый блок подгонять? Да и без увеличения раз в 5 - тяжело проверить, чтобы именно пиксель в пиксель был . Что он будет целый час возиться и сверять все?

А то я на хабрабаре вычитала, что ну не умеете пиксель в пиксель верстать - не гундите, что это не нужно. Типа профессионалы все могут и делают работу).

А как вы замеряете пиксели между блоками? Я просто увеличиваю макет раз в 5, беру инструмент - выделить область квадратиком - выделяю аккуратно квадрат между блоками и смотрю его величину или высоту. Требует некоторой точности рук и не очень быстро это все.

Дальше хуже - написано высота шрифта 24, на деле получается 23. И не понятно куда этот лишний пиксель затесался - вверх или вниз? Из какого паддинга сверху или снизу его вычитать?

Edited March 25, 2013 by Zverushka

[lexxcode]

нужно не стремиться сделать абсолютную копию как в макете, ибо реальное наполнение все равно как правило будет отличаться. Нужно смотреть на положение элементов относительно друг друга, и думать как элементы будут себя вести в реальных условиях. Да и потом браузер это не фотошоп, он в принципе не может и не предназначен для того чтобы рисовать все так же само как фотошоп. А клиенту, который пытается сверять "на просвет" страничку с макетом, нужно просто объяснить, что это неправильно, ну если уж упирается, то гнать в три шеи

[SelenIT]

С line-height поколдуйте...

[Veseloff]

Давно замечено, что как ни крути, в win, os x и какой-нибудь убунте, например, будет три разных варианта. А ещё бывает, что в разных браузерах по-разному. Так что не надо со шрифтами «пикселизировать» — всё равно ничего не получится.

[ILL-JAH]

Давно замечено, что как ни крути, в win, os x и какой-нибудь убунте, например, будет три разных варианта. А ещё бывает, что в разных браузерах по-разному. Так что не надо со шрифтами «пикселизировать» — всё равно ничего не получится.

+100500. Задротствовать можно тьлько со свободно распространяемыми шрифтами, которые вы можете подгрузить чере @font-face.Но это ещё один get-запрос и скачка пользователем ещё одного файла. А файлы со шрифтами попадаются не такие уж и легковесные.

Edited March 25, 2013 by ILL-JAH