Pixel perfect текст

[Vlad02]

При верстке текста получается вот такая беда

 

красный текст - текст который получился в браузере, тёмный - из макета (PSD).

Как видно слова "деньги" и "на" почти совпадают, остальные нет. Текст обвёрнут в h1, стили написаны для h1.

Как решить эту проблему?

 

З.Ы. почти весь текст в макете получается с такими "выкрутасами".

[satantx]

Может в макете такое значение параметра стоит?

[Vlad02]

Может в макете такое значение параметра стоит?

нет не стоит, на всех словах стоит 0, а вот кернинг для всех слов Metrics, а для первого слова пусто.

[satantx]

1. Во всех браузерах такое?

2. Попробуйте сами написать этот текст в шопе и сравните, может дизайнер сжал текст обычными средствами?

[afdw]

http://jsfiddle.net/6jk20Lu7/

[Great Rash]

Мало данных. Что за шрифт, какой размер шрифта, покажите скрин панельки Character из фотошопа, покажите стили для заголовка.

[Vlad02]

1. Во всех браузерах такое?

2. Попробуйте сами написать этот текст в шопе и сравните, может дизайнер сжал текст обычными средствами?

1. Хром, ИЕ, Лиса везде одинакова, с учетом разницы рендеринга шрифтов.

2. Сам написал, совпало всё четко.

http://jsfiddle.net/6jk20Lu7/

Про это я знаю.

У меня одна строка текста один тег, некоторые слова совпадают, некоторые нет.

Мало данных. Что за шрифт, какой размер шрифта, покажите скрин панельки Character из фотошопа, покажите стили для заголовка.

Шрифт Roboto Condensed

h1{font-family: 'Roboto Condensed', sans-serif;text-align: center;font-size: 40px;font-weight: bold;color: red;line-height: 1;text-transform: uppercase;word-spacing: -2px;}

Шрифт берется с CDN Google.

Вдогонку, при открытии макета фотошоп выдает вот это

С чем это связано и может ли это вносить коррективы в текстовые слои?

[Great Rash]

Не до пикселя подогнать нереально. Наилучшие результаты я получил при таком коде:

 

h1 {  font: 41px 'Roboto Condensed', sans-serif;  letter-spacing: -1.5px;  word-spacing: 1px;}

Но это мегаизврат будет так подгонять каждый заголовок.

Ошибка такая будет валится если дизайнер заюзал новые фичи из Photoshop CC, которых нет в Photoshop CS6. При этом кстати часть слоёв в макете может вообще потеряться, так что поговорите с дизайнером на эту тему.

[Vlad02]

Проблема в том, что там весь текст такой "закрученный".

Попробую этот макет в Photoshop CC открыть, отпишу, что получиться.

[klierik]

не стоит вообще заморачиватся по поводу межбуквенного интервала. в одном браузере выровняете -- в другом полезет

важнее учитывать размер и высоту строки

 

и кстати, надо выравнивать не по-центру строки, а слева на право

[Vlad02]

не стоит вообще заморачиватся по поводу межбуквенного интервала. в одном браузере выровняете -- в другом полезет

важнее учитывать размер и высоту строки

 

и кстати, надо выравнивать не по-центру строки, а слева на право

Я под каждый браузер и не ровняю, знаю что это бесполезно.

Про размеры согласен.

"Слева на право" не получится в данном случае, т.к. заголовок расположен по центру макета, в других случая да.

[klierik]

"Слева на право" не получится в данном случае, т.к. заголовок расположен по центру макета, в других случая да.

 

Что значит не получится? Подвигать картинку поверх сайта нельзя чтоль?

Береш макет, кладешь на верстку, двигаешь картинку влево\вправо что бы совпала первая буква -- и потом видишь в чем реально разница. А она будет в межбуквенном интервале, потому как в Фотошопе он совершенно иной, нежели в любом браузере.

 

Такие вещи подгонять безсмысленно так как "починив" в одном браузере это не дает гарантии что ничего не "поломал" в другом под другой OS

[Vlad02]

Так проблема в том, что 15 букв совпадают остальные нет или я чего-то не понял.

 

Photoshop CC проблему не решил, пропало только окно с "...unknown data...".