Фотошоп Mock Up Font отличается от HTML

Question

(для начинающих в HTML)

Я сделал макет Photoshop для веб-сайта, который я хочу сделать, но текст, который я использовал в макете, выглядит по-другому при просмотре в Firefox. Текст представляет собой шрифт Arial, размер 18pt и обычный вес, и я внедрил его в код HTML, но он выглядит по-другому.

Есть ли способ заставить шрифт выглядеть в HTML так же, как в Photoshop?

Заранее спасибо:)

Answer 1

Краткий ответ - «нет». Photoshop имеет много больше возможностей шрифта, чем веб-браузер. Он применяет все виды алгоритмов сглаживания, и вы можете намного лучше контролировать кернинг, отслеживание и интервалы.

Каждый браузер и операционная система также имеют отдельный механизм рендеринга, поэтому, даже если бы вы могли получить его одинаковым в одной комбинации браузера / ОС, в другом он выглядел бы по-другому.

Однако, проверьте все свойства CSS для текста , чтобы узнать, сможете ли вы получить то, с чем сможете жить. Если нет, то лучше всего сделать изображение из вашего текста и добавить его на свою страницу с хорошим текстом «alt» и тому подобным.

Answer 2

Я не уверен, в какой ОС вы работаете, но Windows и Macintosh имеют разные системы шрифтов.

Этот пост Джоэла Спольски указывает, что рендеринг шрифта основан на философских различиях.

Это то, что вы видите? Пожалуйста, разместите изображения, чтобы мы могли видеть, о чем вы говорите.

Answer 3

Если вам нужны идеальные, кристально чистые соответствия шрифтов, вы можете использовать flash ... но это сопровождается целым рядом недостатков.

Answer 4

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

Answer 5

Есть два способа сделать это:

1. Возьмите изображение этого шрифта и используйте его в макете.
2. Используйте пользовательский инструмент для создания шрифтов, такой как SIFR или FLIR. Это сложный вариант, потому что вам нужно иметь Adobe Flash и иметь права на распространение шрифта (аналогично книгам, музыке и т. Д.).

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

Если вы ищете, как превратить макеты Adobe Photoshop в HTML-документы, вам следует ознакомиться с серией скринкастов *1012* на CSS-tricks.com, которую ведет Крис Койер, очень талантливый дизайнер это не я :)).

Answer 6

Шрифты - это то, что вы просто не можете получить прямо в Интернете. Если вам абсолютно необходимо контролировать внешний вид шрифтов, то вы должны использовать изображения (и вас за это избивают, и это правильно). Просто невозможно добиться идеального пиксельного отображения текста в HTML. Это начинается с различий в шрифтах операционной системы и заканчивается различиями в механизмах компоновки браузера.