Почему начертание шрифта подключенного к странице расходится с макетом в PSD?

Question

[Дмитрий Акулич]

В макете указан шрифт pragmatica в различных начертаниях. При подключении его к странице символы выглядят не так как в макете, и это очень заметно.

Подключал и через link (сервис allfont.ru) и через @font-face, при сохранении шрифта в папке сайта, но все равно есть различия в начертаниях.

Например в макете буква "В" выглядит так:


а по итогу на сайте так:


так же есть различия по буквам "З", "Б" и т.д.

В чем может быть причина?

Answer 1

[Сергей Мелодин]

В Фотошопе есть настройка сглаживания шрифта: резкое, плавное, насыщенное, ЖКД Windows. Также есть возможность отключить сглаживание, что меняет шрифт, иногда, до неузнаваемости. Собственно, большинство шрифтов в вебе отображаются без сглаживания, что ты и наблюдаешь в своём случае.

Имитировать сглаживание можно в CSS через text-shadow, задавая в цвет текста тень через rgba, но именно нормального дефолтного инструмента сглаживания на программном уровне мне не известно. Поэтому выбор другого шрифта может иметь место, как поиск решения, но про пиратский шрифт - это, видимо, анекдот какой-то.

Кстати, подобные явления можно наблюдать не только на шрифтах, но и на скруглённых краях, которые в вебе могут выглядеть куда лучше, чем в Фотошопе. Это одна из причин по которой SVG-иконки предпочтительнее, ведь программно они подстраиваются под плотность пикселей и дают, преимущественно, лучший результат.

Answer 2

[Анатолий]

Скачайте шрифт, который вы подключаете, себе на компьютер и установите его для текста в ФШ. Если начертание станет "неправильным", то дело в шрифте allfont.ru (неправильные, другая версия, пиратский и т.д.). Подключайте шрифт, который использовался в ФШ.

Comments

[Дмитрий Акулич]

так надо же сверстать макет, с нужным шрифтом :)

Пришел к выводу, что allfont.ru выдает немного другой шрифт.

[Анатолий]

Дмитрий Акулич, я это и хотел сказать, что allfont.ru выдает немного другой шрифт и что лучше подключать шрифт, который использовался в макете (именно с компьютера).

[Антон]

Дмитрий Акулич, Т.е., как говорит Анатолий , лезем в папку C:/windows/fonts , ищем там искомый шрифт и копируем его с последующем подключением уже на сайте.

Answer 3

[Сергей]

Это совершенно нормальное поведение. Шрифты в ФШ и в браузере могут отличаться, даже если используется один и тот же шрифт. Все дело в разном рендеренге. Нужно подбирать шрифт чтоб смотрелся везде одинаково, либо использовать уже проверенные шрифты с гугл.фонтс и будет все ок.