Преобразование значения отслеживания букв, установленного в Photoshop, в эквивалентный интервал между буквами в CSS

в настоящее время я строю сайт из PSD. Большинство шрифтов имеют отслеживание букв -25 (<- AV->: Я предполагаю, что это символ для интервала между буквами?).

Как бы я получил тот же эффект в CSS? Я знаю, что собственность letter-spacing: X но это не занимает процентов и-25px или pts будет огромная цифра!

10
css fonts letter-spacing photoshop units-of-measurement

4 ответов

можно использовать em размер вместо px, таким образом, размер интервала относительно размера шрифта (так что 25% photoshop находится где-то около .25em).

10

в Photoshop интервал между буквами называется отслеживанием букв и представляет собой пространство между каждой буквой текста. Проблема в том, что Photoshop Letter Tracking не преобразует 1:1 в интервал между буквами в CSS.

это очень легко рассчитать преобразование из Photoshop в CSS, хотя.

формулы для преобразования Photoshop Letter Tracking в CSS letter-spacing

em Формула

    X / 1000 = Y

X is the value of the letter-tracking in Photoshop
Y is the value in "em" to use in CSS

пример

рассмотреть следующий пример: Photoshop имеет значение отслеживания букв 200..

200 / 1000 = 0.2

результат 0.2 em в CSS.

px Формула

если вы предпочитаете использовать значения "px", формула

    X * S / 1000 = P

X is equal to the letter-tracking value in Photoshop
S is the font-size in pixels
P is the resulted value in "px" to use in CSS

пример

рассмотрим следующий пример: Photoshop имеет значение отслеживания букв 200 и значение размера шрифта 10.

200 * 10 / 1000 = 2

результат 2 пикселя в CSS.

17

в таких контекстах, как это, безразмерные числа обычно подразумевают типографскую единицу, которая является небольшой долей em единица. Обычно его называют просто "юнит". Значение этой единицы зависит от шрифта и выражается как значение UPM (единицы на em). Общее значение UPM равно 1,000, но шрифты Microsoft имеют 2,048, а также другие значения. (Эта проблема подробно описана в статье значение UPM 1000 установленных в камне?)

предполагая значение UPM 1,000, -25 соответствовало бы -0.025 em. Настройка letter-spacing: -0.025em имеет тенденцию иметь довольно небольшой эффект: длинная текстовая строка становится примерно на один" i " короче. Эффект, который вы получаете с помощью CSS, не должен быть таким же, как в PhotoShop; механизмы рендеринга PhotoShop отличаются от механизмов браузеров.

7

если ваша проблема просто с преобразованием единицы, вы можете использовать em вместо px

хотя em позволяет десятичные числа, это не изменяет точность рендеринга. 0.5px или эквивалентная точность не отображается в браузерах - она станет либо 0, либо 1px. Просто потому, что экран не может показать половину пикселя, в лучшем случае он может апроксимировать это с сглаживанием.

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

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

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

2