text-strokeje experimentální vlastnost, která poskytuje možnosti výzdoby textu podobné těm, které se nacházejí v aplikaci Adobe Illustrator nebo jiných aplikacích pro vektorové kreslení. V současné době není součástí žádné specifikace W3C nebo WHATWG. Od června 2013 je implementována pouze za -webkitpředponou dodavatele, i když budoucí verze Firefoxu a Internet Exploreru mohou tuto vlastnost podporovat (pravděpodobně pod vlastními předponami).
mark ( -webkit-text-stroke: 2px red; )text-strokeNemovitost je vlastně zkratka pro dvě další vlastnosti:
text-stroke-width, který přebírá jednotkovou hodnotu (1px, 0,125 em, 4 palce atd.) a popisuje tloušťku efektu tahu.text-stroke-color, který přebírá barevnou hodnotu (hex, rgb / rgba, hsl / hsla atd.).
text-strokemá také doprovodnou vlastnost, text-fill-colorkterá colorvlastnost přepíše , což umožní elegantní záložní nastavení jiné barvy textu v prohlížečích, které nepodporují text-stroke.
Body zájmu
- Tah nakreslený pomocí
text-strokeje zarovnán do středu tvaru textu (což je výchozí nastavení v aplikaci Adobe Illustrator) a v současné době neexistuje možnost nastavit zarovnání na vnitřní nebo vnější stranu tvaru. Díky tomu je to bohužel mnohem méně použitelné, protože bez ohledu na to, co nyní tah zasahuje do tvaru písmene ničícího záměr původních návrhářů. Nastavení by bylo ideální, ale kdybychom si ho museli vybrat, vnější tah by byl mnohem užitečnější. - v Webkit,
text-strokeje animovatelný s CSS Transitions and Animations - ale pouze barva tahu, ne šířka tahu. - Používá se více kompatibilní s prohlížečem (a pravděpodobně robustní)
text-strokeefekttext-shadow, který je uveden v tomto článku o tricích CSS.
Podpora prohlížeče
| Chrome | Safari | Firefox | Opera | TJ | Android | iOS |
|---|---|---|---|---|---|---|
| -webkit- | -webkit- | 21 | 15+ | 10 | Složitý | -webkit- |
Poznámka k podpoře prohlížeče: Výše uvedená tabulka je souhrnem celkové podpory prohlížeče text-stroke- pravda je mnohem komplikovanější (například Android podporoval vlastnost ve verzích 2.1-2.3, poté odstranil podporu ve verzi 3.0, před obnovením podpory ve verzi 4.0) . Úplnou tabulku podpory prohlížeče naleznete na caniuse.com/text-stroke.