Как рассчитать расстояние между буквами CSS v.s. «отслеживание» в типографии?

Question

У меня есть инструкции от графического дизайнера для макета, который определяет «дорожку 100» для некоторых элементов. В CSS letter-spacing является эквивалентным свойством для отслеживания.

Учитывая ценность отслеживания, как вы выражаете это как значение для CSS в пикселях?

Answer 1

Нужно ли использовать пиксели? Конверсий, которые я нашел, является значением отслеживания 1000, равным 1 em в CSS, поэтому в вашем случае отслеживание 100 должно составлять 0,1 em.

EDIT

Чтобы перейти от ЭМ пикселей использовать этот сайт PXtoEM.com. Для вашего конкретного случая 0.1 em преобразуется в 2px. Однако это основано на шрифте 16pt, поэтому вам придется настроить размер шрифта, который вы используете.

Answer 2

отслеживания переходов CSS «письмо-разнос»

1 =1/1000 em 
100 =100/1000 em =0.10 em 
200 =200/1000 em =0.20 em 

Answer 3

TL; DR: разделить трекинг на 1000 и использовать em «s

---

Немного предыстории о letter-spacing всегда применяется к тексту, поэтому мы должны использовать относительную единицу длины. Поскольку font-size может быть изменен пользователем или даже каскадом.

best единица длины для текста - em единица измерения.

Данное устройство представляет собой расчетный размер шрифта элемента. Если используется свойство на самом свойстве font-size, оно представляет унаследованный размер шрифта . CSS Lengths - Mozilla Developer Network

Почему отслеживания отличается?

Приложения макета, такие как Photoshop, Illustrator и InDesign от Adobe, используют в своем отслеживании em, но манипулируют устройством, поэтому для дизайнеров это проще. Для того, чтобы сделать его легче они раз его на 1000.

Преобразование отслеживания обратно в целом em «s

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

So 50/1000 = 0.05em.

Расчет этого в CSS/SCSS

Если вы используете SCSS и хотите многоразовый решение - вот Mixin.

// 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); 
} 

В качестве альтернативы вы можете просто к математике инлайн без Mixin так это менее абстрактно:

.example{ 
    letter-spacing: #{(50/1000)}em; 
} 

Выход для приведенных выше примеров будет:

.example { 
    letter-spacing: 0.05em; 
} 

Примечание : Вы не должны использовать пиксельное значение, поскольку пиксели фиксированы и разрываются ru:

1. Дизайнер меняет размер шрифта. Вам нужно будет пересчитать значение .

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

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

Answer 4

По большей части приведенные выше ответы достаточно точны, однако 1000, которые используются, предполагает, что ваш шрифт имеет размер Em 1000, и это не всегда так. Я видел шрифты, размер которых составляет 1024, а некоторые - даже 2048, что, очевидно, будет иметь последствия.

Вы можете узнать размер шрифта шрифта, открыв его внутри чего-то вроде Font Forge, а затем выбрав пункт меню Элементы -> Информация о шрифте и вкладку Общие.