Свойство CSS text-stroke
Используйте свойство CSS text-stroke, чтобы задать ширину и цвет обводки текста. Значения и примеры.
Свойство text-stroke рисует контур (обводку) вокруг каждого символа текста, позволяя управлять краем глифов, а не только их заливкой. Это сокращённая форма двух отдельных свойств:
- text-stroke-width — толщина обводки.
- text-stroke-color — цвет обводки.
На этой странице рассматриваются синтаксис, допустимые значения, стратегия отката для неподдерживаемых браузеров и запускаемые примеры.
Зачем использовать text-stroke
Веб-шрифты обычно построены на векторной графике: форма глифа описывается математическими кривыми и точками, а не пикселями. Поскольку контур является реальным геометрическим путём, браузер может рисовать вдоль него — точно так же, как программы для работы с векторной графикой добавляют обводку к фигуре. text-stroke предоставляет эту возможность в CSS, что удобно для крупных заголовков, логотипов или «контурных» надписей, где text-shadow не даёт чёткого края.
Распространённый приём — символ только с обводкой: задайте text-fill-color равным transparent, чтобы внутренняя часть каждого глифа была пустой и была видна только обводка.
text-stroke не является стандартным свойством. На практике его необходимо писать с префиксом -webkit- (-webkit-text-stroke). Реализации немного различаются в разных браузерах, и поведение может измениться в будущем, поэтому всегда предусматривайте запасной вариант.
Поддержка браузерами и запасной вариант
Поскольку поддержка не гарантирована, никогда не полагайтесь только на обводку. Свойство text-fill-color переопределяет обычное свойство color только в браузерах, которые его понимают, поэтому стандартная техника выглядит так:
p {
color: #1c87c9; /* fallback: plain colored text everywhere */
-webkit-text-fill-color: #f0f0f0; /* honored only where text-stroke works */
-webkit-text-stroke: 2px #1c87c9;
}Браузеры без поддержки -webkit-text-fill-color игнорируют эти две строки и отображают обычный текст цвета #1c87c9. Цвета можно выбрать из справочника HTML colors.
| Начальное значение | 0 currentColor (то есть нулевая ширина) |
|---|---|
| Применяется к | Всем элементам. |
| Наследуется | Нет. |
| Анимируемое | Нет (отдельные свойства text-stroke-width и text-stroke-color — да). |
| Версия | Compatibility Standard |
| DOM Syntax | object.style.webkitTextStroke = "1px #666"; |
Синтаксис
Значения CSS text-stroke
-webkit-text-stroke: <width> <color> | initial | inherit;Два параметра независимы по порядку, и каждый из них может быть опущен. Ширина принимает любую единицу измерения длины CSS length (px, pt, em, cm, …); цвет принимает любое значение цвета CSS.
Пример свойства text-stroke:
Пример кода CSS text-stroke
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
font-size: 2.5em;
margin: 0;
-webkit-text-stroke: 2px #1c87c9;
}
</style>
</head>
<body>
<h2>Text-stroke property example</h2>
<p>Lorem Ipsum is simply dummy text...</p>
</body>
</html>Результат
Пример свойства text-stroke с несколькими значениями:
Пример CSS text-stroke с несколькими значениями
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.a {
font-size: 2.5em;
margin: 0;
-webkit-text-stroke: 1px #8ebf42;
}
.b {
font-size: 2.5em;
margin: 0;
-webkit-text-stroke: 2pt #8ebf42;
}
.c {
font-size: 2.5em;
margin: 0;
-webkit-text-stroke: 0.1cm #8ebf42;
}
</style>
</head>
<body>
<h2>Text-stroke property example</h2>
<p class="a">Lorem Ipsum is simply dummy text...</p>
<p class="b">Lorem Ipsum is simply dummy text...</p>
<p class="c">Lorem Ipsum is simply dummy text...</p>
</body>
</html>Здесь 1px, 2pt и 0.1cm — все допустимые единицы ширины, поэтому три абзаца получают постепенно утолщающиеся обводки.
Значения
| Значение | Описание |
|---|---|
| length | Задаёт толщину обводки. |
| color | Задаёт цвет обводки. Можно использовать названия цветов, шестнадцатеричные коды, rgb(), rgba(), hsl(), hsla(). |
| initial | Устанавливает свойство в значение по умолчанию. |
| inherit | Наследует свойство от родительского элемента. |