Лучший способ сделать твердый текст Outline / Stroke во всех браузерах?

Question

У меня проблема с наложением контура / обводки на текст, который выглядит хорошо и / или даже работает в любом браузере. Прямо сейчас я использую:

<div style="font-family: Helvetica,sans-serif;color: #FFFFFF;font-size:40px;font-weight:bold;letter-spacing:-1px;text-shadow:2px 2px 0 #000,-2px -2px 0 #000,2px -2px 0 #000,-2px 2px 0 #000,2px 2px 0 #000;filter:DropShadow(Color=#000000, OffX=2, OffY=2);">Text Example</div>

И хотя это применяет контур к тексту в Firefox, Chrome и Safari - это выглядит не очень хорошо, когда некоторые углы не используют контур, а контур даже не работает в IE, поэтому он переключается на просто используя тень. Есть ли лучший способ применения текстовой структуры / обводки, который будет выглядеть лучше и работать в любом браузере?

Answer 1

Используйте вместо SVG. Посмотрите здесь

Answer 2

На самом деле тень текста не предназначена для добавления обводки к тексту, поэтому она не дает желаемого точного эффекта.Однако это выглядит приемлемо, если вы используете тень размером 1px / -1px.

вы можете попробовать JavaScript для этого .. "http://www.netzgesta.de/dev/text/#overview"

посмотрите, поможет ли это вам.

Answer 3

Текстовая тень не предназначена для эмуляции обводки, поэтому caveat emptor .