Как сделать контурный текст?

Контурный текст выглядит так, будто каждую букву обвели цветной тушью. Обычно такой способ оформления применяется к заголовкам с рубленым шрифтом и крупными буквами (рис 1). Для мелкого текста, как правило, контурные буквы не используются, поскольку снижают читаемость и восприятие текста.

Вид контурного текста

Рис. 1. Вид контурного текста

Ниже рассмотрим три метода создания контурных заголовков:

Свойство text-stroke

Для создания контурных заголовков применяется два стилевых свойства:

  • text-stroke-width — устанавливает толщину контура (text-stroke-width: 2px);
  • text-stroke-color — задаёт цвет контура (text-stroke-color: red).

Вместо этих двух свойств можно написать и одно универсальное text-stroke. В качестве значения через пробел пишем толщину и цвет контура (text-stroke: 2px red).

Эти свойства официально не входят в спецификацию CSS и браузерами поддерживаются только с префиксом -webkit- (даже в Firefox). В примере 1 показана стилизация заголовков <h1> с помощью оранжевого контура толщиной в два пикселя.

Пример 1. Использование -webkit-text-stroke

Код примера скопирован в буфер
<!DOCTYPE html>
<html lang="ru">
 <head>
  <title>Контурный текст</title>
  <style>
    body {
      background-color: #000; /* Чёрный фон */
      color: #fff; /* Белый цвет текста */
    }
    h1 {
      font: bold 3em Arial, sans-serif; /* Параметры шрифта */
      -webkit-text-stroke: 2px orange; /* Параметры контура */
      color: transparent; /* Цвет букв заголовка */
   }
  </style>
 </head>
 <body>
  <h1>Функция Вейерштрасса</h1>
  <p>Обычный текст.</p>
 </body>
</html>

Цвет текста можно менять через привычное нам свойство color. И если это значение, как в примере, установить прозрачным, то будет отображаться только контур.

Данный метод создания контура является наиболее универсальным и поддерживается всеми современными браузерами. При этом следует учитывать, что свойство text-stroke нестандартное и не входит официально в спецификацию CSS.

Свойство text-shadow

text-shadow добавляет к тексту тень, но при определённых значениях свойства такая тень напоминает контур. Используем следующий синтаксис:

text-shadow: 0 0 2px <цвет контура>

Толщина в два пикселя подобрана опытным путём; если установить большее значение, то контур станет выглядеть размытым. Но даже в этом случае тень слабо похожа на контур. Для усиления цвета надо повторить одни и те же параметры тени несколько раз через запятую. Четырёх раз вполне достаточно, хотя при желании можно сделать и больше. На рис. 2 показан вид контуров с разным числом теней. Первым сверху идёт текст с одной тенью, для каждого следующего текста количество теней увеличивается на единицу.

Вид контура в зависимости от тени

Рис. 2. Вид контура в зависимости от тени

В примере 2 показано создание контурного заголовка через тень.

Пример 2. Использование text-shadow

Код примера скопирован в буфер
<!DOCTYPE html>
<html lang="ru">
 <head>
  <meta charset="utf-8">
  <title>Контурный текст</title>
  <style>
    body {
      background-color: #000; /* Чёрный фон */
      color: #fff; /* Белый цвет текста */
    }
    h1 {
      font: bold 3em Arial, sans-serif; /* Параметры шрифта */
      text-shadow: 
        0 0 2px orange,
        0 0 2px orange,
        0 0 2px orange,
        0 0 2px orange; /* Параметры тени */
      color: #000; /* Цвет текста */
    }
  </style>
 </head>
 <body>
  <h1>Функция Вейерштрасса</h1>
  <p>Обычный текст.</p>
 </body>
</html>

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

Данный метод создаёт фиктивный контур за счёт использования тени вокруг букв, из-за чего такой контур не имеет чётких очертаний и слегка размыт. Чтобы усилить цвета приходится повторять параметры тени несколько раз. Зато свойство text-shadow работает во всех браузерах, включая устаревшие версии.

Использование SVG

SVG предлагает дополнительные возможности для оформления текста по сравнению с CSS. К тому же SVG поддерживают все браузеры, включая устаревший Internet Explorer.

Для создания контурного текста внутрь контейнера <svg> вставляем элемент <text> и для него задаём свойство stroke-width, определяющее толщину контура, и свойство stroke, которое устанавливает цвет этого контура (пример 3).

Пример 3. Использование SVG

Код примера скопирован в буфер
<!DOCTYPE html>
<html lang="ru">
 <head>
  <meta charset="utf-8">
  <title>Контурный текст</title>
  <style>
    body {
      background-color: #000; /* Чёрный фон */
      color: #fff; /* Белый цвет текста */
    }
    .title text {
      font: bold 3em Arial, sans-serif; /* Параметры шрифта */ 
      stroke-width: 2px; /* Толщина контура */
      stroke: orange; /* Цвет контура */
      alignment-baseline: central; /* Выравнивание по центру */
      fill: none; /* Для Оперы убираем заливку */
    }
  </style>
 </head>
 <body>
  <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="60" class="title">
    <text x="0" y="50%">Функция Вейерштрасса</text>
  </svg>
  <p>Обычный текст.</p>
 </body>
</html>

В браузере Opera текст отображается белым цветом с оранжевым контуром. Чтобы оставить только контур, используем свойство fill со значением none.

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

Текст