text-strokeявляется экспериментальным свойством, которое предоставляет параметры оформления текста, аналогичные тем, которые используются в Adobe Illustrator или других приложениях для рисования векторных изображений. В настоящее время он не включен ни в одну спецификацию W3C или WHATWG. По состоянию на июнь 2013 года он реализован только за -webkitпрефиксом поставщика, хотя будущие версии Firefox и Internet Explorer могут поддерживать это свойство (вероятно, под своими собственными префиксами).
mark ( -webkit-text-stroke: 2px red; )Это text-strokeсвойство фактически является сокращением для двух других свойств:
text-stroke-width, который принимает значение единицы (1px, 0,125em, 4in и т. д.) и описывает толщину эффекта штриха.text-stroke-color, который принимает значение цвета (шестнадцатеричный, rgb / rgba, hsl / hsla и т. д.).
text-strokeтакже имеет сопутствующее свойство, text-fill-colorкоторое переопределит colorсвойство, позволяя изящно вернуться к другому цвету текста в браузерах, которые не поддерживают text-stroke.
Точки интереса
- Обводка, нарисованная с помощью
text-stroke, выравнивается по центру текстовой фигуры (как по умолчанию в Adobe Illustrator), и в настоящее время нет возможности установить выравнивание по внутренней или внешней части фигуры. К сожалению, это делает его гораздо менее удобным, так как независимо от того, что сейчас штрих мешает форме буквы, разрушая первоначальный замысел шрифтовых дизайнеров. Настройка была бы идеальной, но если бы нам нужно было выбрать одну, внешний ход был бы намного полезнее. - в Webkit
text-strokeможно анимировать с помощью переходов и анимации CSS, но только цветом штриха, а не шириной штриха. - Используется более совместимый с браузером (и, возможно, надежный) заменитель
text-strokeэффектаtext-shadow, который описан в этой статье CSS-Tricks.
Поддержка браузера
| Хром | Сафари | Fire Fox | Опера | IE | Android | iOS |
|---|---|---|---|---|---|---|
| -webkit- | -webkit- | 21 год | 15+ | 10 | Сложно | -webkit- |
Примечание о поддержке браузером: приведенная выше таблица представляет собой сводку общей поддержки браузером text-stroke- правда намного сложнее (например, Android поддерживал свойство в версиях 2.1–2.3, затем удалил поддержку в 3.0, прежде чем восстановить поддержку в 4.0) . Полную таблицу поддержки браузеров см. На сайте caniuse.com/text-stroke.