Jump to content
  • 0

Несоответствие начертаний шрифтов Photoshop при верстке


sergeysurovikin
 Share

Question

В Photoshop есть различные начертания шрифтов, типа Regular, Semibold, Bold. Как подобрать соответствия им через font-weight. Т.е. если указано Semibold, выбираешь тот же размер, шрифт и непонятно какое выбирать начертание, ни обычное ни bold не похоже

Edited by sergeysurovikin
Link to comment
Share on other sites

11 answers to this question

Recommended Posts

  • 0
  On 4/10/2012 at 9:19 AM, Vin said:

Посмотрите здесь http://htmlbook.ru/css/font-weight и попробуйте поперебирать значения. Вот мне недавно помогло значение lighter, хотя в фотошопе шрифт был обозначен как regular.

Спасибо. Но я думаю что это серьезная проблема, с которой даже профессиональные верстальщики сталкиваются каждый день и есть кардинальное решение этой проблемы

Link to comment
Share on other sites

  • 0
  On 4/10/2012 at 9:26 AM, sergeysurovikin said:

…это серьезная проблема, с которой даже профессиональные верстальщики сталкиваются каждый день и есть кардинальное решение этой проблемы

есть такое.

Забить.

Link to comment
Share on other sites

  • 0

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

Link to comment
Share on other sites

  • 0
  On 4/10/2012 at 9:48 AM, Vin said:

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

А как быть с требованиями Pixel Perfect.

Link to comment
Share on other sites

  • 0
  On 4/10/2012 at 9:53 AM, sergeysurovikin said:

А как быть с требованиями Pixel Perfect.

Объяснять либо не работать с таким заказчиком, если не хочешь лишнего гемороя.

Pixel Perfect шрифтов во всех браузерах возможен только в виде картинки

Link to comment
Share on other sites

  • 0
  sergeysurovikin said:

А как быть с требованиями Pixel Perfect.

Мне вот такие критерии нравятся: Чек-лист вёрстки. Они тоже довольно строгие и там тоже много спорных моментов, но процитирую:

  Quote
Расположение блоков должно быть 1:1 по сравнению с макетом. Допускается расхождение до 5px для текста.

Даже микроскопическое расхождение line-height приводит к тому, что при большом кол-ве текста ни о каком pixel perfect речи быть не может. А требовать можно и хорошего качества печати журнала "Сноб" на туалетной бумаге "54 метра".

Link to comment
Share on other sites

  • 0
  On 4/10/2012 at 9:53 AM, sergeysurovikin said:

А как быть с требованиями Pixel Perfect.

Открываем макет в фотошопе. В меню: File->Save as…, выбираем, к примеру, png. И вот он, пиксельперфект!

Link to comment
Share on other sites

  • 0
  On 4/10/2012 at 9:26 AM, sergeysurovikin said:

Спасибо. Но я думаю что это серьезная проблема, с которой даже профессиональные верстальщики сталкиваются каждый день и есть кардинальное решение этой проблемы

1) Попробовать Google Fonts

2) Выбить из дизайнера желание использовать Regular ногами или стулом.

Edited by Radiocity
  • Like 1
Link to comment
Share on other sites

  • 0
  On 4/10/2012 at 10:04 AM, Vin said:
  sergeysurovikin said:

А как быть с требованиями Pixel Perfect.

Мне вот такие критерии нравятся: Чек-лист вёрстки. Они тоже довольно строгие и там тоже много спорных моментов, но процитирую:

  Quote
Расположение блоков должно быть 1:1 по сравнению с макетом. Допускается расхождение до 5px для текста.

Даже микроскопическое расхождение line-height приводит к тому, что при большом кол-ве текста ни о каком pixel perfect речи быть не может. А требовать можно и хорошего качества печати журнала "Сноб" на туалетной бумаге "54 метра".

Спасибо большое. Материал на хабре очень интересный

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy