Свойство CSS text-stroke

Свойство text-stroke является экспериментальным и предоставляет возможности оформления текста. Это сокращённая запись для следующих свойств:

Существует свойство text-fill-color, которое переопределяет свойство color, обеспечивая плавный переход к другому цвету текста в браузерах, не поддерживающих свойство text-stroke.

Вы можете выбрать цвета здесь: Цвета HTML.

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

WARNING

Свойство text-stroke используется только с вендорным префиксом -webkit-. Это свойство не является стандартным. Оно работает не у всех пользователей. Существуют несовместимости между реализациями, и поведение может измениться в будущем.

Начальное значение	0 currentColor
Применяется к	Всем элементам.
Наследуется	Да.
Анимация	Да.
Версия	Стандарт совместимости
Синтаксис DOM	object.style.textStroke = "1px #666";

Синтаксис

Значения CSS text-stroke

css

text-stroke: length | color | initial | inherit;

Пример свойства text-stroke:

Пример кода CSS text-stroke

html

<!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>

Try it Yourself »

Результат

Пример свойства text-stroke с несколькими значениями:

Пример нескольких значений CSS text-stroke

html

<!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>

Try it Yourself »

Значения

Значение	Описание
length	Указывает толщину обводки.
color	Указывает цвет обводки. Можно использовать названия цветов, шестнадцатеричные коды, rgb(), rgba(), hsl(), hsla().
initial	Заставляет свойство использовать значение по умолчанию.
inherit	Наследует свойство от родительского элемента.

Практика

Свойство text-stroke является сокращённой записью для следующих свойств:

text-stroke-style, text-stroke-colortext-stroke-width, text-stroke-colortext-stroke-width, text-stroke-styletext-stroke-style, text-stroke-type

Свойство CSS text-stroke ​

Синтаксис ​

Пример свойства text-stroke: ​

Результат ​

Пример свойства text-stroke с несколькими значениями: ​

Значения ​