letter-spacing в CSS


letter-spacing

Поддержка браузерами

12.0+ 4.0+ 1.0+ 1.0+ 3.5+ 1.0+

Описание

CSS свойство letter-spacing позволяет увеличивать или уменьшать расстояние между буквами в тексте.

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

Примечание: для регулирования расстояний между словами используйте CSS свойство word-spacing, для изменения расстояния между строк — line-height.

Photoshop — CSS-правило letter-spacing

November 01, 2013

Наконец-то у меня дошли руки и пришло время разобраться с палитрой “Символ” в Photoshop.

До сегодняшнего дня о ней знал не полностью. Конечно, с такими полями, как “Шрифт”, “Размер шрифта”, “Цвет шрифта”, “Межстрочное расстояние” я был знаком. Но вот столкнулся в одном из psd-макетов с неизвестным мне полем.

Предположительно, оно должно было означать расстояние между буквами строки. То самое, за которое в CSS отвечает правило .

Еще более загадочным для меня было значение этого поля: . То, что знак минуса означает “ужать” слова в строке, можно было догадаться. Но вот что за единицы измерения применяет Photoshop в данном случае? Как мне перевести это значение в CSS? В каких единицах — пикселях или em?

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

Итак, есть psd-макет, на котором для шрифтов применено загадочное значение в таком же, не менее загадочном, поле:

Смотрим внимательно на панельку “Символ”. Здесь собраны воедино все свойства, отвечающие за прорисовку шрифта на макете.

Верхние два поля — “Georgia” и “Regular”. Здесь все просто и понятно — семейство шрифта и его начертание. В CSS данные значения оформляются через правила и .

Второй ряд из двух полей, со значениями и . Думаю, здесь также не должно возникнуть вопросов. — размер шрифта, — интерлиньяж, межстрочное расстояние. За первое свойство в CSS отвечает правило , за второе — .

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

В CSS имеется аналогичное правило, которое называется . Не стоит путать его с очень похожим правилом . Разница между ними очевидна, хотя сфера применения одинакова — строка текста. задает расстояние между словами, а — расстояние между буквами.

Вернемся к нашим баранам. Видно, что в поле стоит значение . О том, как перевести его в CSS, расскажу немного позже. А пока кратко пробежимся по остальным строкам палитры “Символ”.

В четвертом ряду располагаются два поля, назначение которых в оригинале пишется так: “Vertical scalar tool” и “Horizontal scalar tool”. Можно догадаться, что с помощью этих настроек можно масштабировать (растягивать или сжимать) буквы как по-вертикали, так и по-горизонтали.


В последнем (пятом) ряду находится поле изменения расстояния для индексов, и поле цвета шрифта (букв).

Вот, в принципе, и все описание. Краткое — но к чему растягивать его? Полное описание с картинками, полезное для себя, нашел в этой статье.

Илон Маск рекомендует:  Единицы CSS в CSS

Перейду к вопросу, который остался открыт — как преобразовать значение в Photoshop в аналогичное правило CSS?

Что за единицы измерения использует Photoshop в данном случае, честно сказать, не знаю. Какие-то загадочные, свои собственные, наверное. Но это и не интересно, если что. Нужно лишь перевести их в одну из двух наиболее популярных единиц измерения CSS — или .

Перевод осуществляется с помощью формул. Эти формулы были выведены опытным путем автором статьи — Justin Marsan. На своей собственной практике я пару раз проверил их и пришел к выводу, что они верны.

Формула перевода значения Photoshop в :

где — это значение в Photoshop. В конкретном случае оно будет равно:

Формула перевода значения Photoshop в пиксели :

где — это значение в Photoshop, — размер шрифта там же. То есть, сначала значение межбуквенного расстояния умножается на размер шрифта, а затем полученное значение делиться на 1000.

В конкретном случае формула и результат будет следующим:

На этом, думаю, что все сказано.

RxJs — map

Первый «серьезный» метод в моей RxJs-копилке знаний. На самом деле все просто — этот метод получает на вход поток, обрабатывает каждый ev. … Continue reading

CSS letter-spacing Свойство

Пример

Задайте интервал между буквами для

элементов:

h2 <
letter-spacing: 2px;
>

Определение и использование

Свойство letter-spacing увеличивает или уменьшает расстояние между символами в тексте.

Значение по умолчанию: normal
Inherited: yes
Animatable: yes. Читайте о animatable
Version: CSS1
Синтаксис JavaScript: object.style.letterSpacing=»3px»

Поддержка браузера


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

Letter-spacing в CSS

Это одна из проблем, относящихся к группе «а почему шрифт выглядит не так, как на макете?». Используя letter-spacing и приведенные формулы расчета, можно добиться очень близкого сходства со шрифтом на макете. Хорошая новость: все современные браузеры поддерживают letter-spacing. Плохая новость: все обрабатывают шрифты, и letter-spacing в частности, по-своему. Поэтому полного соответствия с макетом по-прежнему ждать не приходится.

Ну и мой обычный совет: изменяйте межбуквенный интервал осторожно. Буквы — не гармонь, которую обязательно надо тянуть для извлечения звуков. Помните, что шрифты делались знающими людьми по своим правилам. Не ломайте их без лишней необходимости.

Как изменить расстояние между буквами и словами в CSS?

Здравствуйте, дорогие посетители!

Наверняка у каждого из вас возникали ситуации, когда при верстке вам нужно было разместить в блоке какой-либо текст, но он в него не вмещался, или наоборот, был слишком маленьким по объему, и в блоке оставалось слишком много пустого места.

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

Как поменять расстояние между буквами CSS?

Чтобы изменить межбуквенный интервал в CSS мы можем использовать свойство letter-spacing. По умолчанию браузеры устанавливают межбуквенный интервал, основываясь на типе выбранного шрифта и его параметров. С помощью данного свойства мы можем задать расстояние между буквами для текста css в конкретном элементе.

Свойство letter-spacing может принимать три значения:

  • Числовое значение – можно задать интервал в любых доступных для css единицах измерения (px, in, pt, em, ex), а так же можно задавать как положительные, так и отрицательные значения.
  • normal – задает расстояние между буквами css для текста по умолчанию (0.25em)
  • inherit – параметры межбуквенного интервала в css будут наследоваться от родительского элемента.

Например:

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

Для первых трех блоков можно попробовать увеличить расстояние между буквами css, и тем самым сделать его немного объемнее. В файле стилей, для абзацев в классах первых трех элементов пишем следующие свойства:

CSS урок 14. Межбуквенный интервал

При верстке сайта обычно возникают всякого рода требования к тексту: где-то нужно выделить его заглавными буквами, где-то растянуть, а иногда возникает необходимость в увеличении или уменьшении расстояния между буквами.

После недолгих раздумий можно решить, что подобного рода необходимость у вас не возникнет. Однако, народная мудрость гласит: «Никогда не говори никогда». Это изречение будет особенно уместно, если вы занимаетесь версткой профессионально.

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

Свойство letter-spacing


При помощи этого параметра мы можем управлять межсимвольным интервалом. В качестве значений подходят те же единицы измерения, которые мы используем при задании размера текста. В связи с этим советую изучить урок по размеру текста, если вы этого еще не сделали. Сперва, давайте попробуем увеличить межбуквенный интервал на 2 px.

Все очень просто: мы указываем свойство letter-spacing и требуемое значение в тех или иных единицах измерения. Давайте к примеру, попробуем использовать единицу измерения em .

Как и в предыдущем случае, расстояние между буквами увеличилось, но еще на большую величину. Результат обеих CSS правил можно увидеть на иллюстрации ниже.

Разница в использовании пикселей и единиц измерения em

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

Уменьшение расстояния между буквами

Мы также можем работать в сторону уменьшения. Для этого необходимо указывать отрицательные значения. Например, на один пиксель:

Вот как это выглядит на практике:

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

Наследование

Свойство letter-spacing является наследуемым. Это означает, что изменив расстояние между буквами для одного элемента, вложенные в него теги унаследуют эти же значения. Например, представим что мы изменили межсимвольное расстояние для куска текста с классом morning (

Теперь, все вложенные в него абзацы будут наследовать значение родителя. Для того, чтобы сделать стандартное межбуквенное расстояние для одного из абзацев, нужно воспользоваться все тем же свойством letter-spacing , только придав ему значение normal .

Значение normal всегда будет возвращать текст к стандартному интервалу между символами.

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

В общем, как видите, в управлении межбуквенным интервалом нет ничего сложного. Главное — не забывайте про удобство читателя.

А на этом у меня все. Смею предположить что вам все понятно, если нет — задавайте свои вопросы в комментариях. Надеюсь, данный урок по CSS был для вас полезен. Если это так, сделайте репост данной статьи в социальных сетях, чтобы больше людей получили от нее пользу.

letter-spacing

Браузер Internet Explorer Netтscape Опера Safari Mozilla Firefox
Версия 5.5 6.0 7.0 8.0 8.0 9.0 7.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0
Поддерживается Да Да Да Да Да Да Да Да Да Да Да Да Да Да Да Да

Краткая информация

CSS (ЦСС) CSS (ЦСС)1
Значение по умолчанию normal
Наследуется Да
Применяется Ко всем элементам
Аналог ШТМЛ Нет
Ссылка на спецификацию http://www.w3.org/TR/CSS21/text.ШТМЛ#propdef-letter-spacing

Описание


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

Синтаксис

letter-spacing: значение | normal

Аргументы

В качестве значений принимаются любые единицы длины, принятые в CSS (ЦСС) — например, пикселы (px), дюймы (in), пункты (pt) и др. Наилучший результат дает использование относительных единиц основанных на размере шрифта (em и ex). Аргумент normal задает интервал между символами как обычно.

ШТМЛ 4.01 CSS (ЦСС) 2.1 IE 5.5 IE 6 IE 7 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0

Результат данного примера показан ни рис. 1.

Рис. 1. Применение параметра letter-spacing

letter-spacing

Свойство CSS letter-spacing используется для изменения расстояния между символами в тексте элемента. По умолчанию каждый шрифт имеет какое-то свое значение этого свойства, которое браузеры и используют при отображении. Но с помощью letter-spacing можно сделать так, чтобы символы располагались дальше друг от друга или наоборот стояли вплотную.

Тип свойства

Применяется: ко всем элементам.

Значения

Значением свойства letter-spacing является указание расстояния между символами одним из следующих способов:

  • normal — используется расстояние соответствующее каждому шрифту по умолчанию. Причем при выравнивании текста браузеры могут его менять на свое усмотрение.
  • Размеры — изменение межбуквенного расстояния относительно установленного по умолчанию, то есть значение 0 будет соответствовать normal . Указывается в относительных или абсолютных единицах измерения принятых в CSS, например: пиксели (px), пункты (pt), сантиметры (cm) и т.д. Допускаются отрицательные значения.
  • inherit — наследует значение letter-spacing от родительского элемента.

Процентная запись: не существует.

Значение по умолчанию: normal.

Браузеры могут проигнорировать letter-spacing , когда происходит выравнивание текста по обоим краям элемента (свойство text-align).

Синтаксис

Пример CSS: использование letter-spacing

Результат. Использование свойства CSS letter-spacing.


Версии CSS

Версия: CSS 1 CSS 2 CSS 2.1 CSS 3
Поддержка: Да Да Да Да

Браузеры

Браузер: Internet Explorer Google Chrome Mozilla Firefox Opera Safari
Версия: 6.0 и 7.0 8.0 и выше 2.0 и выше 2.0 и выше 9.2 и выше 3.1 и выше
Поддержка: Частично Да Да Да Да Да

Internet Explorer 6.0 и 7.0 не понимают значение inherit .

CSS Свойство letter-spacing

Пример

Установить расстояние между буквами для элементов h1 и h2:

h1
h2

Попробуйте сами »

Определение и Использование

Свойство letter-spacing увеличивает или уменьшает расстояние между символами в тексте.

Значение по умолчанию: normal
Наследуется: да
Версия: CSS1
JavaScript синтаксис: объект.style.letterSpacing=»3px»

Поддержка Браузерами

Свойство letter-spacing поддерживается всеми основными браузерами.

Замечание: Значение «inherit» не поддерживается в IE7 и более ранних версиях. IE8 требует объявления !DOCTYPE. IE9 поддерживает «inherit».

Переносим межбуквенный интервал из Фотошопа в CSS

Межбуквенный интервал в Фотошопе регулирует расстояние между символами в тексте. В CSS это свойство letter-spacing . Проблема в том, что межбуквенный интервал в Фотошопе не конвертируется 1:1 к межбуквенному интервалу в CSS.

Хотя это легко считается по пропорции 1000 межбуквенного интервала в Фотошопе = 1em в CSS.

Все что вам нужно, это разделить число из Фотошопа на 1000, чтобы получить значение в em.

Примеры

В фотошопе В CSS
1000 1em
200 0.2em
30 0.03em
10 0.01em

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

Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL