Как рассчитать CSS letter-spacing V. s. "отслеживание" в типографии?

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



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

615   4  

4 ответов:

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

EDIT

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

62  
2010-05-04 17:55:38

TL; DR: разделите отслеживание на 1000 и используйте em ' s

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

The лучшие единица длины для текст em единица.

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

почему отслеживание разных?

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

Indesign Tooltip: Tracking (in thousandths of an em

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

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

так 50/1000 = 0.05em.

вычисление этого в CSS / SCSS

если вы используете 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;
}

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

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

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

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

21  
2016-04-14 04:36:26

отслеживание преобразования CSS "letter-spacing"

1 =1/1000 em
100 =100/1000 em =0.10 em
200 =200/1000 em =0.20 em
17  
2014-03-25 15:53:57

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

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

1  
2017-10-25 00:51:19

Comments

    Ничего не найдено.
Click here to cancel reply.