Как изменить межбуквенный интервал
В процессе создания документа для декоративного выделения какого-либо фрагмента текста можно воспользоваться такой функцией редактора, как изменение межбуквенного интервала. Можно сделать разреженный или уплотненный интервал.
Вот так выглядит текст с разреженным межбуквенным интервалом (2пт):
А вот так — с уплотненным межбуквенным интервалом (1пт):
Чтобы изменить интервал между буквами следует выделить нужный текст и выполнить следующие действия.
Для редактора Word 2003
Для редактора Word 2007
Если вы предпочитаете работать с клавиатурой путем вызова сочетаний клавиш, то вам необходимо самостоятельно установить такие сочетания клавиш для применения команд уплотненного или разреженного интервала между символами.
Если вы используете редактор Word 2003, то откройте диалоговое окно Настройка (меню Сервис — команда Настройка ) и нажмите кнопку Клавиатура . Откроется диалоговое окно Настройка клавиатуры . В поле Категории выберите строку Формат , а в поле Команды выберите строку Condensed (уплотненный интервал) или Expanded (разреженный интервал) и задайте для этих команд подходящие вам сочетания клавиш.
Если вы используете редактор Word 2007, то для вызова диалогового окна Настройка клавиатуры необходимо открыть диалоговое окно Параметры Word и перейти на закладку Настройка . В открывшейся панели нажать кнопку Настройка . Далее в поле Категории выбрать категорию Все команды , а в поле Команды найти и выбрать строку Condensed или Expanded и назначить для этих команд свои сочетания клавиш.
Еще записи по вопросам использования Microsoft Word:
- Word 2007: полотно, рисунки, линии
- Word 97. Слияние документов как один из способов упростить свою работу
- Абзац с цветным фоном
- Автозаполняемые колонтитулы
- Автоматическая нумерация билетов
- Автоматическое обновление полей при открытии документа
- Автотекст с последовательной нумерацией
- Автоформат документов
- Буквица
- Быстрая смена ориентации страниц документа
- Быстрое изменение стиля форматирования текста
- Быстрое удаление границ у таблицы
- Быстрый поиск форматированного текста
- В чем различие между Автозаменой и Автотекстом
- В чем различие между стилями Обычный (Normal) и Основной текст (Body Text)?
- Ввод повторяющихся фрагментов текста в Word 2007
- Вставка документа с книжной ориентацией в документ с альбомной ориентацией
- Вставка неформатированного текста
- Вставка скопированного текста в предопределенном формате
- Вставка текста с полями в нижний колонтитул
- Выравнивание номеров страниц в буклете
- Выравнивание текста на странице
- Где брать красивые шрифты для работы
- Двойная нумерация страниц в документе
- Задать обтекание текстом для всех рисунков в документе
Межсимвольный, межстрочный интервал CSS. Расстояние между словами
Работая со стилем для текста, вы можете устанавливать необходимые расстояния между символами, словами и строками. Задаются такие расстояния в любых единицах измерения CSS, будь-то px , pt , em или другое. Исключением являются проценты – с их помощью можно задать расстояние между строками (интерлиньяж), но они не работают при установке интервала между символами или словами.
Межсимвольный интервал CSS: letter-spacing
Задать межсимвольный интервал можно с помощью свойства CSS letter-spacing. Помимо обычных значений (положительных и отрицательных) также можно использовать значения inherit (чтобы наследовать значение у родителя) и normal (если необходимо вернуть нормальное расстояние между символами).
Пример записи межсимвольного интервала:
Интервал между словами: word-spacing
Свойство CSS word-spacing отличается от предыдущего тем, что устанавливает расстояние между словами, а не между символами. Для данного свойства тоже предусмотрены значения normal и inherit . Можно задавать отрицательные значения. Ниже показан пример записи стиля:
Межстрочный интервал: line-height
С помощью свойства CSS line-height можно задавать расстояние между строками текста. Как было сказано в начале темы, для установки интерлиньяжа, помимо других единиц измерения, допускается использовать проценты. Также разрешено записывать значение в виде множителя (числа больше 0): для вычисления расстояния браузер умножит размер шрифта на заданное число. Отрицательные значения не работают. Доступны значения normal и inherit .
Ниже – пример, как сделать межстрочный интервал CSS:
На скриншоте можно увидеть, как выглядит текст со всеми тремя свойствами:

Итоги
Устанавливая интервал между словами, символами или строками, в первую очередь следите за тем, чтобы текст в итоге был легко читаем. С подобными свойствами необходимо обращаться аккуратно и всегда использовать их в меру, без фанатизма, иначе все текстовое содержимое грозит превратиться в неразборчивый набор букв.
Как настроить межбуквенный интервал для текстов на веб-странице
Типографика важна для любого читаемого контента, включая веб-сайты. Межбуквенный интервал является его частью и определяет расстояние между печатными символами в словах на веб-странице, что изменяет визуальную плотность и делает тексты оптически последовательными. Вы можете изменить значение свойства Межбуквенный интервал на панели свойств для выбранного текста, гиперссылки, кнопки и т. д. По умолчанию значение межбуквенного интервала равно 0.

Просмотр по категориям функций
Элементы веб-страницы
Поддерживаемые системы
Визуальный редактор страниц
Элементы дизайна
Медиа библиотеки
Свойства элемента
Отзывчивый
Эффекты анимации
Настройки темы
Форма обратной связи
Верхний и нижний колонтитулы
Электронная коммерция
Пользовательский код
Особенности приложения
Свойства сайта и страницы
Виджеты WordPress
Все, что вам нужно для создания бесплатного веб-сайта
Используйте наш Конструктор веб-сайтов для проектирования и создания веб-сайтов без программирования. Перетащите все, что хотите, в любое место. Создатель веб-сайта автоматически адаптирует ваш веб-сайт для мобильных устройств, чтобы сделать его адаптивным. Выбирайте из более чем 10,000 настраиваемых шаблонов веб-сайтов.
Связанные функции

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

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

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

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

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

Основное выравнивание текста
Помимо выравнивания элементов, размещающего текстовый элемент в группе, ячейке сетки или блоке, вы можете использовать базовое выравнивание для упорядочения содержимого внутри текстового элемента. Чтобы реализовать это, вам нужно выбрать текстовый элемент и щелкнуть один из значков выравнивания на панели свойств. Это поможет вам расположить текстовый элемент и его внутреннее содержимое по-разному, если это необходимо.

Автоматическая или фиксированная ширина текста
Ширина текста важна, так как помогает правильно определить положение всех элементов блока и выровнять весь макет. Ширина текста делает содержимое привлекательным и читабельным. На панели свойств вы можете определить, как текст соответствует контейнеру или блоку. Если вы выберете параметр «Автоматическая ширина», текст автоматически примет ширину контейнера, используя слова, что значительно упростит настройку дизайна для адаптивного режима. Параметр «Фиксированная ширина» позволяет установить точную ширину текстового элемента.

Вес шрифта
Одни и те же шрифты семейства с разной толщиной шрифта указывают на иерархию, намерение и выделяют важную информацию. Использование правильной толщины шрифта в нужных местах — это своего рода искусство. В Nicepage вы можете использовать широкий диапазон поддерживаемых значений веса шрифта, поддерживаемых семейством шрифтов, чтобы в полной мере воспользоваться этим свойством. Если поддерживается, вы можете иметь разные веса шрифта для каждого стиля текста и адаптивных режимов — от тонкого (100) до черного (900).

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

Богатый текст
Если у вас есть длинный текст для вашего сайта, и текст не очень удобен в использовании, то есть Rich Text Element (RTE), позволяющий создавать статьи с длинным содержанием. В отличие от обычных элементов «Заголовок», «Текст», «Список» и «Изображение», вы можете добавлять и изменять эти элементы непосредственно в элементе форматированного текста, аналогично редактированию текста в процессоре, таком как MS Word.
![]()
Значок в тексте
Значок, добавленный к тексту, облегчает чтение, понимание и помогает просто и быстро передать настроение. Обычно он призывает к действию и просто делает текст более привлекательным. С другой стороны, текст рядом со значком помогает сделать его более понятным, уменьшая двусмысленность. Чтобы упростить совместное использование значка и текста, в Nicepage вы можете вставить значок в текст с контекстной панели инструментов. При необходимости вы можете использовать раздел «Значок» на панели свойств для текста, чтобы изменить значок.

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

Текстовый шрифт
Несмотря на растущую популярность визуальных мультимедийных элементов, текст по-прежнему является наиболее часто используемым типом для доставки информации в Интернете. Ваш веб-сайт должен иметь читаемый шрифт для предоставления контента. Выберите текстовый элемент, а затем измените его шрифт на панели свойств. Мы предоставили вам более 900 шрифтов Google и выделили самые популярные в отдельный список. Вы также можете найти недавно использованные шрифты в другом списке. Также есть возможность добавить собственный шрифт.
How to Adjust the Letter Spacing Of the Text Elements
Typography is one of the most important parts of website design and plays a huge role in creating content. Using the letter spacing and tracking the letters, you can control the style of the texts. Select the needed element from the property panel and change the spacing between letters, vertical space between lines, etc. It is a very useful feature, as it helps to adjust the space between letters, and web designers can modify their texts in one click. You can choose the font and line size you will use for the text. Make sure that this feature will help you for creating beautiful-looking texts.
There is little spacing between the letters and symbols only where designers use heavy fonts and apply a large size. Studies show that people remember things better because of the large font sizes. Starting with the body text size: use a 16px-18px font size and a regular font weight. Small fonts are understandably harder to follow, so more line spacing can be required to make it easier for the human eye to follow them. Some types of fonts have more space than others, which gives the appearance that one typescript is greater than the other and more or smaller vertical space between lines. Tracking is a process that influences word spacing, spacing between characters, white space, and the font mixture.
The interval between the main and body text should be clear and simple. The type size of headings and body text are also key factors for the total flow and the aesthetics of an effective web design. Capital letter tracking is a basic thing web designers employ in the initial web design phase. Web designers and printers have stopped managing paragraph font size and the spaces between small characters in body text. When discussing text size for web design, we may use what these guidelines discussed for a series of font types have been. If you want to design web pages, keep in mind that the types of fonts as typesets are the main parts of overall branding.
font-weight
CSS свойство font-weight устанавливает начертание шрифта. Некоторые шрифты доступны только в нормальном или полужирном начертании.
Интерактивный пример
Синтаксис
font-weight: normal; font-weight: bold; /* Relative to the parent */ font-weight: lighter; font-weight: bolder; font-weight: 100; font-weight: 200; font-weight: 300; font-weight: 400; font-weight: 500; font-weight: 600; font-weight: 700; font-weight: 800; font-weight: 900; /* Global values */ font-weight: inherit; font-weight: initial; font-weight: unset;
Значения
Нормальное начертание. То же, что и 400 .
Полужирное начертание. То же, что и 700 .
Изменяет начертание относительно насыщенности родительского элемента (сверхтонкое начертание).
Изменяет начертание относительно насыщенности родителя элемента (сверхжирное начертание).
100 , 200 , 300 , 400 , 500 , 600 , 700 , 800 , 900
Цифровые значения насыщенности шрифтов, которые позволяют задавать больше, чем нормальное и полужирное начертание.
Недоступность заданного значения
Если заданное цифровое значение насыщенности недоступно, для определения толщины отображаемого шрифта используется следующий алгоритм:
- Если задано значение выше 500 , будет использовано первое доступное более жирное начертание (если такого не окажется, то первое доступное более светлое).
- Если задано значение менее 400 , будет использовано первое доступное более светлое начертание (если такого не окажется, то первое доступное более жирное).
- Если задано значение 400 , будет применено 500 . Если 500 недоступно, то будет использован алгоритм для подбора значений менее 400 .
- Если задано значение 500 , будет применено 400 . Если 400 недоступно, то будет использован алгоритм для подбора значений менее 400 .
Это означает, что для шрифтов, которые предоставляют только normal и bold начертания, 100-500 normal, и 600-900 bold.
Значение относительных весов
Когда используется жирнее или светлее, следующая таблица используется для вычисления абсолютного веса элемента:
| наследуемое значение | жирнее | светлее |
|---|---|---|
| 100 | 400 | 100 |
| 200 | 400 | 100 |
| 300 | 400 | 100 |
| 400 | 700 | 100 |
| 500 | 700 | 100 |
| 600 | 900 | 400 |
| 700 | 900 | 400 |
| 800 | 900 | 700 |
| 900 | 900 | 700 |
Определение веса имени
Значения от 100 до 900, примерно, соответствуют следующим распространённым именам насыщенности:
| Значение | Общее название |
|---|---|
| 100 | Тонкий (Волосяной) Thin (Hairline) |
| 200 | Дополнительный светлый (Сверхсветлый) Extra Light (Ultra Light) |
| 300 | Светлый Light |
| 400 | Нормальный Normal |
| 500 | Средний Medium |
| 600 | Полужирный Semi Bold (Demi Bold) |
| 700 | Жирный Bold |
| 800 | Дополнительный жирный (Сверхжирный) Extra Bold (Ultra Bold) |
| 900 | Чёрный (Густой) Black (Heavy) |
Интерполяция
Значения font-weight интерполируются с помощью дискретных шагов (кратные 100). Интерполяция происходит в действительном пространстве чисел и превращается в целое число путём округления до ближайшего числа, кратного 100, со значениями посредине между кратными 100 округлёнными в сторону положительной бесконечности.
Формальный синтаксис
font-weight =
| (en-US)
bolder | (en-US)
lighter
=
normal | (en-US)
bold | (en-US)
Примеры
HTML
p> Alice was beginning to get very tired of sitting by her sister on the bank, and of having nothing to do: once or twice she had peeped into the book her sister was reading, but it had no pictures or conversations in it, 'and what is the use of a book,' thought Alice 'without pictures or conversations?' p> div> I'm heavybr /> span>I'm lighterspan> div>
CSS
/* Назначение тексту элементажирного начертания. */ p font-weight: bold; > /* Назначение тексту элемента жирности, которая больше на два уровня, чем normal, но все ещё меньше, чем стандартный bold. */ div font-weight: 600; > /* Назначение тексту элемента жирности, которая на один уровень меньше, чем у его родителя. */ span font-weight: lighter; >
Result
Спецификации
| Specification |
|---|
| CSS Fonts Module Level 4 # font-weight-prop |
| Начальное значение | normal |
|---|---|
| Применяется к | all elements and text. Это также применяется к ::first-letter и ::first-line . |
| Наследуется | да |
| Обработка значения | ключевое слово или числовое значение, с bolder и lighter , трансформируемися в действительное значение |
| Animation type | жирность шрифта |
Совместимость с браузерами
BCD tables only load in the browser
Found a content problem with this page?
- Edit the page on GitHub.
- Report the content issue.
- View the source on GitHub.
This page was last modified on 6 янв. 2024 г. by MDN contributors.
Your blueprint for a better internet.
MDN
Support
- Product help
- Report an issue
Our communities
Developers
- Web Technologies
- Learn Web Development
- MDN Plus
- Hacks Blog
- Website Privacy Notice
- Cookies
- Legal
- Community Participation Guidelines
Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2024 by individual mozilla.org contributors. Content available under a Creative Commons license.