Как сделать обводку текста в CSS и HTML

Обводка текста в CSS задается свойством -webkit-text-stroke или несколькими слоями text-shadow. В HTML также можно использовать SVG-элемент <text>. Вы получите контур, уберете заливку и добавите запасной вид для браузеров без нужного свойства.

Как сделать обводку текста в HTML через CSS и SVG

В HTML обводку текста задают через CSS или SVG. CSS можно применить через атрибут style или класс, а для SVG-надписи используйте элемент <text>.

.outline {
    -webkit-text-stroke: 2px #AFFC41;
}

Добавьте класс к span, заголовку или другому текстовому элементу. CSS сохраняет обычную HTML-разметку и отделяет оформление от текста.

<span class="outline">Контурный текст</span>

SVG задает заливку, цвет контура и его толщину отдельными атрибутами.

<svg viewBox="0 0 520 90" role="img" aria-label="Контурный текст">
  <text x="10" y="65" fill="transparent" stroke="#AFFC41" stroke-width="2">Контурный текст</text>
</svg>

Атрибут stroke задает цвет контура, stroke-width – его толщину, а fill оставляет буквы прозрачными.

Как сделать обводку текста в CSS свойством -webkit-text-stroke

Сокращенная запись принимает ширину и цвет контура в одном свойстве. Такой вариант подходит для обычного заголовка.

.outline {
    -webkit-text-stroke: 2px cyan;
}

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

.outline {
    -webkit-text-stroke-width: 2px;
    -webkit-text-stroke-color: cyan;
}

Это два эквивалентных способа записи. Выберите сокращенный вариант или меняйте ширину и цвет раздельно.

Синтаксис и значения -webkit-text-stroke описаны в документации MDN.

Как добавить обводку текста в HTML-файл

Создайте HTML-файл с фоном и русским текстом. Класс outline отмечает фрагмент, который получит обводку.

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Контурный текст</title>
    <style>
        body {
            background-color: #0F1020;
            padding: 100px;
        }
        #textContainer p {
            font-family: sans-serif;
            font-size: 64px;
            font-weight: 100;
            color: #E6E8E6;
            margin: 0;
        }
    </style>
</head>
<body>
    <div id="textContainer">
        <p>Знали ли вы, что отпечаток пальца уникален?
            <span class="outline">Конечно, знали!</span></p>
    </div>
</body>
</html>

Сохраните файл с расширением .html и откройте его в браузере. На темном фоне появится светлый русский текст без обводки.

Добавьте правило в блок <style> перед закрывающим тегом </style>.

#textContainer .outline {
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: #AFFC41;
}

Правило задает контуру ширину 1 пиксель и цвет #AFFC41. Сохраните файл и обновите страницу. Вокруг фразы «Конечно, знали!» появится зеленый контур.

Чтобы убрать обводку, удалите добавленное правило. Страница вернется к светлому тексту без контура.

Как сделать контур текста без заливки

Задайте прозрачный цвет текста, чтобы оставить только линии вокруг букв. Цвет линий сохранит свойство -webkit-text-stroke-color.

#textContainer .outline {
    -webkit-text-stroke: 1px #AFFC41;
    color: transparent;
}

После обновления страницы от букв останутся зеленые линии. Чтобы вернуть сплошную надпись, замените transparent на цвет текста.

Обводка через text-shadow

Свойство text-shadow создает контур несколькими тенями вокруг текста. Прием подходит для тонкой линии и запасного оформления.

.shadow-outline {
    color: #0F1020;
    text-shadow:
        1px 0 0 #AFFC41,
        -1px 0 0 #AFFC41,
        0 1px 0 #AFFC41,
        0 -1px 0 #AFFC41,
        1px 1px 0 #AFFC41,
        -1px -1px 0 #AFFC41,
        1px -1px 0 #AFFC41,
        -1px 1px 0 #AFFC41;
}

Добавьте правило в блок <style>, а текстовому элементу присвойте класс shadow-outline. Смещения в 1 пиксель покрывают 8 направлений вокруг каждой буквы.

Для более толстой линии добавьте тени с большими смещениями. Такой код увеличивает число правил и усложняет настройку контура.

Толстая обводка HTML-текста через paint-order

Свойство paint-order: stroke fill задает порядок рисования для текста с заливкой и обводкой. Браузер сначала рисует контур, затем заливает буквы поверх него.

Добавьте отдельный заголовок после блока textContainer в созданном файле.

<h2 class="thick-outline">Контурный заголовок</h2>

Поместите эти правила в конец блока <style>. Базовая обводка имеет толщину 1 пиксель.

.thick-outline {
    font-family: sans-serif;
    font-size: 64px;
    font-weight: 700;
    color: #E6E8E6;
    -webkit-text-stroke: 1px #AFFC41;
}

@supports (paint-order: stroke fill) {
    .thick-outline {
        -webkit-text-stroke-width: 6px;
        paint-order: stroke fill;
    }
}

Сохраните файл и обновите страницу. Заголовок покажет светлую заливку поверх зеленого контура. При слиянии внутренних просветов уменьшите значение -webkit-text-stroke-width.

Для такого приема нужна непрозрачная заливка букв. Прозрачная заливка оставит видимой внутреннюю часть контура.

В SVG порядок рисования задайте тому же элементу <text>, который получает заливку и контур.

<svg viewBox="0 0 620 110" role="img" aria-label="Толстый контурный текст">
  <text x="10" y="80" fill="#E6E8E6" stroke="#AFFC41" stroke-width="8" class="svg-outline">Контурный текст</text>
</svg>

.svg-outline {
    paint-order: stroke fill;
}

Вставьте SVG в тело HTML-файла, а правило добавьте в <style>. Надпись получит светлую заливку поверх зеленого контура. Описание paint-order есть в документации MDN.

Запасной стиль для браузеров без поддержки

Задайте обычный цвет текста в том же селекторе, который используется для обводки. Браузер, который игнорирует префиксные правила, сохранит значение color.

#textContainer .outline {
    color: #E6E8E6;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke: 1px #AFFC41;
}

Свойство -webkit-text-fill-color делает заливку прозрачной там, где браузер его понимает. Браузер, который игнорирует оба префиксных свойства, использует значение color.

Условие @supports позволяет применить контур только при распознавании указанного свойства. Добавьте следующий блок в конец <style>. Базовое правило восстановит непрозрачную заливку и сбросит обводку предыдущих примеров.

#textContainer .outline {
    color: #E6E8E6;
    -webkit-text-fill-color: #E6E8E6;
    -webkit-text-stroke: 0;
}

@supports (-webkit-text-stroke: 1px) {
    #textContainer .outline {
        color: transparent;
        -webkit-text-fill-color: transparent;
        -webkit-text-stroke: 1px #AFFC41;
    }
}

Селекторы совпадают по специфичности, поэтому поздние правила переопределяют ранние. Вне условия оба свойства цвета задают светлую непрозрачную заливку. Прозрачность и контур включаются только внутри @supports.

Сохраните файл и обновите страницу. При выполнении условия фраза останется контурной. Чтобы увидеть запасной вид, временно удалите блок @supports целиком. Фраза станет светлой, даже если предыдущие примеры остались в файле.

Как выбрать способ обводки текста

Смотрите на толщину линии, тип элемента и контроль над заливкой. Таблица помогает выбрать подходящий прием.

Для обычного заголовка начните с -webkit-text-stroke. Для тонкого запасного оформления используйте text-shadow, а для SVG-надписи с отдельной заливкой выберите <text>.