Будет ли шрифт моего веб-сайта в веб-браузере выглядеть точно так же, как в Photoshop?

Я хочу убедиться, что мой дизайн будет выглядеть в Интернете точно так же, как в Photoshop или InDesign.

Вы не можете.

Причина в том, что не существует единого «точного» способа, с помощью которого ваш сайт будет работать в Интернете. Каждый браузер, каждая операционная система, все предпочтения конечного пользователя, каждый экран, каждое оборудование привносят в таблицу некоторую вариативность.

Вот почему так много людей предлагают вам больше не создавать веб-сайты полностью в Photoshop, а вместо этого использовать Photoshop в качестве инструмента для создания эскизов, а как можно скорее внести свой дизайн в разметку и CSS. Это позволяет вам проектировать с учетом изменчивости, а не бороться с ней.

Немного удивлен тем, что некоторые из этих ответов не касаются более серьезной проблемы... Если только я что-то здесь не упустил...

Спрашивать, будет ли Photoshop работать с веб-шрифтами или нет, все равно что спрашивать, можете ли вы кататься по большим волнам на своей Honda Civic. Это даже не одно и то же царство.

ВСЁ, ЧТО вы делаете в PS, в какой-то момент будет выплевывать как какой-то образ. В этот момент шрифты, работающие или не работающие, совершенно спорны. Тогда это просто пиксели. Именно поэтому Adobe Muse экспортирует небезопасные веб-шрифты в виде изображений... потому что, конечно, они будут отображаться. Неважно, Helvetica это или самый отвратительный неясный бесплатный дисплейный шрифт, который вы когда-либо видели, в PS он будет отображаться как пиксели.

Теперь, если вы просто говорите ради макетов, тогда да, держите это в безопасности в Интернете, когда в PS. Даже если вы не уверены, когда вы приступите к разработке и у вас есть что-то небезопасное для Интернета, просто используйте Google Fonts или TypeKit или что-то еще, чтобы найти подходящую замену.

Неа. Может быть. Возможно нет.

Прежде всего, для сомневающихся: вы наверняка можете использовать веб-шрифты в Photoshop, если сможете загрузить необходимые форматы шрифтов. Это позволяет вам получить представление о том, как ваш шрифт будет выглядеть в Интернете, а не точное представление.

Почему? Ну, проще говоря, Photoshop и InDesign предлагают некоторые инструменты, которых пока нет в браузерах. Самое главное, что в браузерах отсутствует хороший универсальный алгоритм сглаживания текста. Продукты Adobe автоматически сглаживают тонкие линии, тогда как браузер может сделать их неровными. Еще больше разочаровывает то, что эти несоответствия сами по себе весьма непоследовательны; текст может выглядеть великолепно в Firefox, но ужасно в Chrome.

То есть совпадение 100%? Забудь это. Тем не менее, вот несколько общих советов, как сделать ваши шрифты лучше в Интернете:

• Тонкие линии выглядят неровными? Измените свой font-sizeна один пиксель.
• В качестве альтернативы добавьте крошечный text-shadow(<1 пиксель) к вашему тексту. Ваш текст будет выглядеть совсем крошечным, чуть менее четким, но подправьте его достаточно, и он будет выглядеть лучше, чем когда-либо прежде.
• Используйте letter-spacing, особенно на больших заголовках. Немного сдвиньте их вместе.
• Вы можете значительно улучшить читаемость, играя с line-height.

TL;DR Не ожидайте точного совпадения в PS и браузерах, но используйте типографские инструменты, которые предлагает вам CSS.

Существуют веб-безопасные шрифты и онлайн-ресурсы шрифтов, на которые вы можете ссылаться, а технологии веб-типографики с использованием шрифтов быстро меняются, как и рекомендации. Я пробовал использовать Web Preflight ( https://www.oss-usa.com/web-preflight?promo=web-preflight ) для начального прохождения веб-дизайна Photoshop, работает очень хорошо.