Как сделать внешнюю обводку текста?

Question

[Николай Угольников]

Как сделать внешнюю обводку текста, как на фото слева? Интересны любые способы, хоть на js, хоть canvas, хоть svg text

Answer 1

[Ivan Ustûžanin]

вариант 1: ИМХО самый оптимальный (но криво работает с прозрачным текстом)


вариант 2: доработка напильником ответа Как в шрифте pacifico сделать при бордере, чтобы не было линий при пересечении букв?, если нужно больше контроля над обводкой

Comments

[Николай Угольников]

Спасибо) первый вариант идеальный

[Николай Угольников]

Можете еще подсказать, пожалуйста, реально ли с помощью такого способа делать многострочный текст? Т.е. использовать это как обычный параграф? Не мучаясь с x y, переносами

[Ivan Ustûžanin]

Николай Угольников, скорее всего нет, в спеке есть многострочный автопереносимый текст, но у меня оно нигде не заработало
если нужен многострочный автопереносимый текст, то нужно смотреть на фильтры из 2-го варианта, но там есть свои подводные камни

Answer 2

[Aleksey Solovyev]

Используйте SVG с тэгом text (только оптимизируйте, а не как я в примере)

Answer 3

[Timurkaaa]

а что если попробовать больше значение сделать?

например
-webkit-text-stroke: 10px red;

Comments

[Николай Угольников]

Нужна внешняя обводка. Это свойство делает и внешнюю, и внутреннюю, что искажает сам шрифт