• Страница 1 из 1
  • 1
Как использовать свойство CSS letter-spacing
Kosten
Четверг, 08 Февраля 2018, 21:50 | Сообщение 1
Оффлайн
Администраторы
Сообщений:44490
Награды: 70
Промежуток между буквами, где также определяет расстояние между символами, и зависит от самого вида знака. Свойство идеально подходит для того, чтобы ваши письма выглядели супер близко друг к другу, или супер распространены. Если у вас есть какие-либо знания графического дизайна, это немного похоже на кернинг ваших писем, только нет необходимости в PhotoShop или программном обеспечении для редактирования фотографий.

Использование свойства letter-spacing на самом деле действительно легко и просто. Свойство принимает числовые значения в единицах измерения, таких как px, em и %, и вы можете использовать положительные или отрицательные значения, в зависимости от того, хотите ли вы добавить пробел между буквами или убрать место. Взгляните на приведенные ниже примеры, чтобы увидеть, как вы можете использовать его в реальной жизни.

Чтобы добавить пробелы между буквами, вы хотите использовать положительное значение со свойством letter-spacing, например:

Код
p{
    letter-spacing: 5px;
}

Ввод 5px между вашими буквами или символами сделает ваш текст похожим на текст на изображении ниже.



Как вы можете видеть, что 5px может показаться не очень похожим, он фактически добавляет приличное, заметное количество пробелов между вашими письмами. Обязательно проверьте свой буквенный код перед тем, как сделать его живым, чтобы быть уверенным, что вы не добавляете слишком много места.

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

Код для достижения этого эффекта должен выглядеть примерно так:

Код
p{
    letter-spacing: -3px;
}

Удаление 3px пространства между вашими буквами или символами сделало бы ваш HTML-код похожим на текст на изображении ниже



Текст на этом изображении, как видим показан слишком близко. Важно знать, что если вы удалите слишком много места между вашими письмами, они по существу просто сядут друг на друга и станут неразборчивыми, что может показаться классным, если это то, что вы собираетесь делать, но если вы хотите чтобы ваши пользователи могли читать то, что говорит ваш текст не сходите с ума, удаляя пространство букв.

Это свойство поддерживается во всех основных браузерах и хотя оно не очень популярно, это отличный способ добавить какой-то стиль или профессиональный польский в любой проект или дизайн веб-страницы без использования надежного PhotoShop.
Прикрепления: 0566661.png (11.5 Kb) · 5680246.png (5.2 Kb)
Страна: (RU)
  • Страница 1 из 1
  • 1
Поиск: