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

0 4

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

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

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

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

  • через свойство text-stroke;
  • через свойство text-shadow;
  • с помощью SVG.

Свойство 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> <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> <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> <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 не работают.

Автор: Влад Мержевич
Источник: webref.ru

Оставьте ответ

Ваш электронный адрес не будет опубликован.