Свойство CSS text-stroke-width
Используйте свойство CSS text-stroke-width для задания ширины обводки. Смотрите значения и примеры.
Свойство -webkit-text-stroke-width задаёт толщину контура (обводки), рисуемого вокруг каждого символа. Это одна из двух составляющих функции text-stroke: данное свойство управляет шириной контура, а text-stroke-color — его цветом.
Обводка текста рисуется поверх обычной заливки буквы, по центру края каждого глифа. При большой ширине буквы выглядят как контурные или «полые»; при значении 0 (по умолчанию) обводка вообще не рисуется. Это делает свойство популярным способом создания крупных заголовков с эффектом обводки, «прозрачного» текста и декоративных заголовков без необходимости использовать изображения.
h1 {
-webkit-text-stroke-width: 2px;
-webkit-text-stroke-color: #1c87c9;
}Зачем и когда использовать
Используйте text-stroke-width, когда нужен эффект контура, чёткий при любом размере, при этом текст остаётся настоящим и выделяемым:
- Контурные заголовки — добавьте заголовку цветную рамку для плакатного вида.
- Прозрачный / «полый» текст — сочетайте обводку с text-fill-color
: transparent, чтобы была видна только обводка, а сквозь буквы просвечивал фон. - Читаемость на фоне изображений — тонкая обводка помогает отделить светлый текст от насыщенного фона — аналогично text-shadow, но плотнее прилегает к глифу.
text-stroke-width не является самостоятельным стандартизированным свойством. Стандартная форма — сокращённое свойство text-stroke (CSS Text Decoration Level 4). На практике все современные браузеры по-прежнему требуют префикс -webkit-, поэтому используйте -webkit-text-stroke-width для ширины и сочетайте с -webkit-text-stroke-color для цвета.
На что обратить внимание
- Всегда задавайте цвет. Если указана ширина без
-webkit-text-stroke-color, используетсяcurrentColor(цвет текста элемента), и обводка может быть незаметна на фоне заливки. Задайте оба значения или используйте сокращённое свойство text-stroke:-webkit-text-stroke: 2px #1c87c9;. - Ширина распространяется внутрь и наружу. Обводка центрируется по краю глифа, поэтому широкая обводка на мелком тексте съедает форму букв и ухудшает читаемость. Используйте большие значения font-size для более широких обводок.
- Не анимируется. Переход по ширине непосредственно не даёт эффекта.
- Предусмотрите запасной вариант. Браузеры без поддержки
-webkit-text-strokeпросто игнорируют его и показывают обычный текст, поэтому результат должен оставаться читаемым без обводки.
| Начальное значение | 0 |
|---|---|
| Применяется к | Всем элементам. |
| Наследуется | Нет. |
| Анимируется | Нет |
| Версия | CSS Text Decoration Module Level 4 (с вендорным префиксом) |
| DOM Синтаксис | object.style.webkitTextStrokeWidth = "1px"; |
Синтаксис
Значения CSS text-stroke-width
-webkit-text-stroke-width: length | initial | inherit;Пример использования свойства text-stroke-width:
Разные единицы измерения (px, mm) задают толщину обводки. Здесь три абзаца имеют одинаковый цвет обводки, но разную толщину — тонкую, среднюю и толстую — для сравнения.
Пример кода CSS text-stroke-width
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p, h2 {
margin: 0;
font-size: 4em;
-webkit-text-stroke-color: #1c87c9;
}
.thin {
-webkit-text-stroke-width: 1px;
}
.medium {
-webkit-text-stroke-width: 3.5px;
}
.thick {
-webkit-text-stroke-width: 1.3mm;
}
</style>
</head>
<body>
<h2>Text-stroke-width property example</h2>
<p class="thin">Lorem Ipsum </p>
<p class="medium">Lorem Ipsum</p>
<p class="thick">Lorem Ipsum</p>
</body>
</html>Результат
Пример «прозрачного» (полого) текста:
Установка text-fill-color в значение transparent скрывает заливку букв, оставляя только обводку. Это классический эффект «только контур» для заголовков.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
h1 {
font-size: 5em;
font-family: sans-serif;
-webkit-text-fill-color: transparent;
-webkit-text-stroke-width: 2px;
-webkit-text-stroke-color: #8ebf42;
}
</style>
</head>
<body>
<h1>Outline</h1>
</body>
</html>Примечание: где это поддерживается, два объявления -webkit-text-stroke-* можно заменить сокращённым свойством text-stroke, например -webkit-text-stroke: 2px #8ebf42;.
Значения
| Значение | Описание |
|---|---|
| length | Задаёт толщину обводки. |
| initial | Устанавливает свойство в значение по умолчанию. |
| inherit | Наследует значение свойства от родительского элемента. |
Связанные свойства
- text-stroke — сокращённое свойство, задающее ширину и цвет одновременно.
- text-stroke-color — задаёт цвет обводки.
- text-fill-color — управляет заливкой букв (используйте
transparentдля прозрачного текста). - text-shadow — альтернативный способ придать тексту глубину или контрастность.