У мене є вказівки від графічного дизайнера щодо макета, який визначає "доріжку 100" для деяких елементів. У CSS letter-spacingце еквівалентна властивість "відстеження".
Враховуючи значення для відстеження, як ви виражаєте це як значення для CSS у пікселях?
Відповіді:
Чи потрібно використовувати пікселі? Значення конверсій, яке я знайшов, - це значення відстеження 1000, що дорівнює 1 em у CSS, тож у вашому випадку відстеження 100 має бути 0,1 em.
РЕДАГУВАТИ
Щоб перейти від ЕМ до пікселів, використовуйте цей сайт PXtoEM.com . Для вашого конкретного випадку 0,1 em перетворюється на 2px. Однак це засновано на шрифті 16pt, тому вам доведеться налаштувати конкретний розмір шрифту, який ви використовуєте.
TL; DR: розділіть відстеження на 1000 і використовуйте em's
Трохи довідкового letter-spacingтексту завжди застосовується до тексту, тому слід використовувати відносну одиницю довжини. Як font-sizeможе змінити користувач або навіть каскад.
Краща одиниця довжини для тексту є emблоком.
Ця одиниця представляє обчислений розмір шрифту елемента. Якщо він використовується в самій властивості font-size, він представляє успадкований розмір шрифту елемента. CSS Length - Мережа розробників Mozilla
Чому відстеження відрізняється?
Програми макетування, такі як Adobe Photoshop, Illustrator та InDesign, використовують emїх для відстеження, але маніпулюють блоком, так що дизайнерам легше грати з ними. Щоб полегшити, вони помножують його на 1000.
Перетворення відстеження назад в цілому em«з
Для цього нам просто потрібно розділити номер відстеження на 1000, щоб повернути одиницю на цілу ем, яку 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;
}
Примітка: Не слід використовувати значення на основі пікселів, оскільки пікселі фіксовані та ламаються, коли:
Дизайнер змінює розмір шрифту. Вам потрібно буде перерахувати значення.
Якщо користувач змінює розмір тексту, дизайн веб-сайтів не відображатиметься бажаним або навіть нечитабельним для читання.
Крім того, браузери відображають текст, відмінний від того, як це роблять програми графічного дизайну, не дивуйтеся, якщо дизайнер налаштує відстеження / інтервал між буквами під час огляду реалізації.
Відстеження конверсії CSS «інтервал між літерами»
1 =1/1000 em
100 =100/1000 em =0.10 em
200 =200/1000 em =0.20 em
Здебільшого наведені вище відповіді є досить точними, однак, використовувана 1000 передбачає, що ваш шрифт має розмір Em 1000, і це не завжди так. Я бачив шрифти з розміром Ем 1024, а деякі навіть 2048, що, очевидно, матиме вплив.
Ви можете дізнатися розмір шрифту шрифту, відкривши його всередині щось на зразок Font Forge, а потім вибравши пункт меню Елементи -> Інформація про шрифт та вкладку Загальне.