Преобразовать значение отслеживания букв, установленное в Photoshop, в эквивалентный межбуквенный интервал в CSS
В настоящее время я создаю сайт из PSD. Большинство шрифтов имеют отслеживание писем -25 (<- AV->: Я предполагаю, что это символ межбуквенного интервала?).
Как бы я получить такой же эффект в CSS? Я знаю, что собственность letter-spacing: X но это не занимает проценты и -25px или pts будет огромной цифрой!
4 ответа
Вы можете использовать em измерение вместо pxТаким образом, размер интервала относительно размера шрифта (так что 25% в Photoshop где-то около .25em).
В фотошопе межбуквенный интервал называется слежением за буквами и представляет собой промежуток между буквами текста. Проблема в том, что Photoshop Letter Tracking не конвертирует 1:1 в Letter Spacing в CSS.
Хотя очень легко рассчитать конверсию из Photoshop в CSS.
Формулы для преобразования отслеживания букв в Photoshop в CSS.
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.2em в 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.
В подобных контекстах числа без единиц обычно подразумевают типографскую единицу, которая составляет небольшую долю em Блок. Обычно его называют "единица". Значение этой единицы зависит от шрифта и выражается в виде значения UPM (единицы измерения на единицу). Общее значение UPM равно 1000, но шрифты Microsoft имеют 2048, и другие значения также встречаются. (Этот вопрос более подробно описан в статье UPM, значение 1000 в камне?)
Если предположить, что значение UPM равно 1000, -25 будет соответствовать -0,025em. настройка letter-spacing: -0.025em имеет тенденцию иметь довольно небольшой эффект: длинная текстовая строка становится примерно на одно "я" короче. Не следует ожидать, что эффект, который вы получите с помощью CSS, будет таким же, как в PhotoShop; механизмы рендеринга PhotoShop отличаются от таковых в браузерах.
Если ваша проблема связана с конвертацией, вы можете использовать em вместо px
Хотя em допускает десятичные числа, это не меняет точность рендеринга. 0.5px или эквивалентная точность не отображается в браузерах - она станет 0 или 1px. Просто потому, что экран не может показывать половину пикселя, в лучшем случае он может приблизиться к этому с помощью сглаживания.
Для более мелких шрифтов сглаживание, вероятно, будет выглядеть хуже, чем интервал. Другой вариант - найти веб-шрифт, который имеет желаемый интервал по умолчанию. Таким образом, вы получите результаты, аналогичные желаемым, но, вероятно, это будет означать изменение шрифта.
Интервал CSS просто не такой точный, как в фотошопе. Одной из причин этого является то, что фотошоп работает и для печати - с разрешением экрана / пикселя вы должны жить с точностью до пикселя. Хотя теоретически это было бы возможно с межбуквенным интервалом, который становится более точным при масштабировании и т. Д. Я не знаю ни одной реализации, которая действительно работала бы таким образом.
Если для вас действительно важен правильный межбуквенный интервал, вы можете попробовать использовать SIFR для более точной визуализации интервала между шрифтами, чем тот, на который способен браузер - возможно, они смогут использовать изменение сглаживания. Очевидно, что это имеет смысл, только если межбуквенный интервал является большой проблемой.