У меня есть инструкции от графического дизайнера для макета, который определяет "дорожку 100" для некоторых элементов. В CSS letter-spacing есть эквивалентное свойство для отслеживания.
Учитывая значение для отслеживания, как вы выражаете это как значение для CSS в пикселях?
Вам нужно использовать пиксели? Конверсий, которые я нашел, является значением отслеживания 1000, равным 1 em в CSS, поэтому в вашем случае отслеживание 100 должно быть 0,1 em.
ИЗМЕНИТЬ
Чтобы перейти от EM к пикселям, используйте этот сайт PXtoEM.com. Для вашего конкретного случая 0.1 em преобразуется в 2px. Однако это основано на шрифте 16pt, поэтому вам придется настроить размер шрифта, который вы используете.
TL; DR: разделите отслеживание на 1000 и используйте em
Немного фона о letter-spacing всегда применяется к тексту, поэтому мы должны использовать относительную единицу длины. Поскольку font-size может изменяться пользователем или даже каскадом.
Единица длины лучший для текста - это единица em.
Этот блок представляет вычисляемый размер шрифта элемента. Если используется на самом свойстве font-size, он представляет собой унаследованный font-size элемента. Длина CSS - Mozilla Developer Network
Почему отслеживание отличается?
Приложения макета, такие как Adobe Photoshop, Illustrator и InDesign, используют em в своем отслеживании, но манипулируют устройством, поэтому для дизайнеров это проще. Чтобы облегчить их, он на 1000 раз.
SCSS и хотите использовать многоразовое решение - вот микшинг.
// Convert illustrator, indesign and photoshop tracking into letter spacing.
@function tracking( $target ){
@return ($target / 1000) * 1em;
}
@mixin tracking( $target ){
letter-spacing: tracking( $target );
}
Чтобы использовать вышеуказанные функции, вы можете просто сделать это.
.example {
@include tracking(50);
}
В качестве альтернативы вы можете использовать только встроенную математику без микширования, чтобы она была менее абстрактной:
.example{
letter-spacing: #{(50/1000)}em;
}
Результат для приведенных выше примеров будет:
.example {
letter-spacing: 0.05em;
}
Примечание: Вы не должны использовать значение на основе пикселя, поскольку пиксели фиксированы и ломаются, когда:
Дизайнер меняет размер шрифта. Вам нужно будет пересчитать значение.
Если пользователь изменяет свой размер текста, дизайн ваших сайтов не появится по желанию или даже неразборчивым для чтения.
Кроме того, браузеры визуализируют текст, отличный от того, как это делают программы графического дизайна, не удивляйтесь, если дизайнер подстраивает отслеживание/разметку букв при просмотре реализации.
Отслеживание конверсии CSS "letter-spacing"
1 =1/1000 em
100 =100/1000 em =0.10 em
200 =200/1000 em =0.20 em
По большей части приведенные ответы достаточно точны, однако 1000, которые используются, предполагает, что ваш шрифт имеет размер Em 1000, и это не всегда так. Я видел шрифты, размер которых составляет 1024, а некоторые - даже 2048, что, очевидно, будет иметь последствия.
Вы можете найти шрифт Em Size, открыв его внутри Font Forge, а затем выбрав меню Elements → Font Info и вкладку "Общие".
Если у вас есть размер шрифта в пикселях, вы можете использовать следующую формулу:
tracking * font-size/1000 = letter-spacing
Хотите знать, как это работает, если вы уменьшаете расстояние между буквами (отслеживание), а не увеличиваете его? Мне нужно снабдить разработчика инструкциями по стилю и сократить отслеживание до -25. Является ли -0.025em действительным?