Text Outline

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

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

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

Можно выбрать цвет отсюда: HTML colors.

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

Значение по умолчанию	0 currentColor
Применяется	Ко всем элементам.
Наследуется	Да
Анимируемое	Да
Версия	—
DOM синтаксис	object.style.textStroke = «1px #666»;

Синтаксис

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

Пример

html> html> head> title>Заголовок документа title> style> p < font-size: 2.5em; margin: 0; -webkit-text-stroke: 2px #1c87c9; style> head> body> h2>Пример свойства text-stroke h2> p>Lorem Ipsum - это текст-"рыба". p> body> html>

Рассмотрим другой пример, где использованы несколько значений свойства text-stroke :

Пример

html> html> head> title>Заголовок документа 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 h2> p class="a">Lorem Ipsum - это текст-"рыба". p> p class="b">Lorem Ipsum - это текст-"рыба". p> p class="c">Lorem Ipsum - это текст-"рыба". p> body> html>

Значения

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

Поддержка браузера

Источник

Обводка буквы

Контур не изменяет ширины буквы, межбуквенного или межсловного расстояния. Одна его половина находится на букве, вторая — вне её. Тень от буквы, при наличии, располагается под контуром, так как начинается от края буквы.

Примеры

Контуры букв

  
Текст

Полосатая тыльная сторона

  
Текст

Окантовка

  Текст

Красивый

  Красивый

345-45-45

  
Текст

Источник

-webkit-text-stroke

The -webkit-text-stroke CSS property specifies the width and color of strokes for text characters. This is a shorthand property for the longhand properties -webkit-text-stroke-width and -webkit-text-stroke-color .

/* Width and color values */ -webkit-text-stroke: 4px navy; text-stroke: 4px navy; /* Global values */ -webkit-text-stroke: inherit; -webkit-text-stroke: initial; -webkit-text-stroke: revert; -webkit-text-stroke: revert-layer; -webkit-text-stroke: unset; 

Constituent properties

This property is a shorthand for the following CSS properties:

Syntax

Values

Formal definition

• -webkit-text-stroke-width : 0
• -webkit-text-stroke-color : currentcolor

• -webkit-text-stroke-width : absolute
• -webkit-text-stroke-color : computed color

• -webkit-text-stroke-width : discrete
• -webkit-text-stroke-color : a color

Formal syntax

Examples

Adding a red text stroke

HTML

p id="example">The stroke of this text is red.p> 

CSS

#example  font-size: 3em; margin: 0; -webkit-text-stroke: 2px red; > 

Result

Specifications

Browser compatibility

BCD tables only load in the browser

See also

Found a content problem with this page?

This page was last modified on Apr 2, 2023 by MDN contributors.

Your blueprint for a better internet.

MDN

Support

Our communities

Developers

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

Источник

Обводка текста CSS: создание эффекта контурного текста

Обводка текста CSS основана на свойстве -webkit-text-stroke , которое принимает в качестве значений ширину и цвет:

Значение width указывает, какой толщины будет контур. Значение color определяет цвет контура. Все довольно просто. Пример применения этого свойства:

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

Размещаем все вместе

Мы рассмотрели свойство -webkit-text-stroke и его использование. Теперь проиллюстрируем все это.

Перед тем, как сделать обводку текста CSS , создайте новый документ HTML и добавьте в него следующую разметку:

     body < background-color: #0F1020; padding: 100px; >#textContainer p  
Did you know that your fingerprint is unique? Of course you did!
 
  

Сохраните веб-страницу, а затем откройте ее в браузере. Вы должны увидеть примерно следующее:

Взгляните на разметку, отвечающую за CSS обводку текста белым цветом, который мы видим:

 
Did you know that your fingerprint is unique? Of course you did!
 

Мы хотим разместить текст внутри элемента span и отобразить его с эффекта контура, о котором говорили ранее. Обводка должна быть шириной 1 пиксель и иметь зеленовато-лимонный цвет. Для этого добавьте следующий код в нижнюю часть блока style ( ниже существующих правил стиля ):

После этого сохраните веб-страницу и откройте ( обновите ) ее в браузере. Вы должны увидеть появившийся контур:

Если хотите отобразить только контур текста, все, что нужно сделать, это присвоить CSS свойству color значение transparent :

После этого текст « Of course you did! » будет отображен только с помощью контура!

Работа со старыми браузерами

Свойство text-stroke поддерживается браузерами хорошо . Но, возможно, вы захотите отобразить альтернативный вариант для тех пользователей, которые используют старые версии браузеров. В этих случаях нужно « закрасить » текст сплошным цветом. Это можно сделать, комбинируя свойства color и -webkit-fill-color :

В этом случае текст будет отображаться сплошным цветом для старых свойств ( с помощью свойства color ). Если поддерживаются свойства -webkit-text , то webkit-text-fill-color переопределит свойство цвета и отобразит контур с прозрачным цветом заливки.

Заключение

Свойство -webkit-text-stroke упрощает создание обводки текста CSS . Раньше, если бы мы хотели сделать это, пришлось бы полагаться на изображения, хитрости с тенями, использование специального контурного шрифта. Теперь нам не нужно все это делать!

МЛ Мария Логутенко автор-переводчик статьи «

Источник