Text-stroke - CSS-tricks

Anonim

text-strokeär en experimentell egenskap som ger textdekorationsalternativ som liknar dem som finns i Adobe Illustrator eller andra vektorritningsapplikationer. Det ingår för närvarande inte i någon W3C- eller WHATWG-specifikation. Från och med juni 2013 implementeras den bara bakom ett -webkitleverantörsprefix, även om framtida versioner av Firefox och Internet Explorer kan stödja fastigheten (troligtvis under sina egna prefix).

mark ( -webkit-text-stroke: 2px red; )

Den text-strokeegenskapen är egentligen en förkortning för två andra egenskaper:

  1. text-stroke-width, som tar enhetsvärdet (1px, 0.125em, 4in, etcetera) och beskriver tjockleken på slageffekten.
  2. text-stroke-color, som tar ett färgvärde (hex, rgb / rgba, hsl / hsla, etcetera).

text-strokehar också en åtföljande egenskap, text-fill-colorsom kommer att åsidosätta coloregenskapen, vilket möjliggör en graciös återgång till en annan textfärg i webbläsare som inte stöder text-stroke.

Kolla in den här pennan!

Intressanta platser

  • Det drag som ritas av text-strokeär inriktat mot mitten av textformen (som är standard i Adobe Illustrator), och det finns för närvarande inget alternativ att ställa in justeringen på insidan eller utsidan av formen. Tyvärr gör detta det mycket mindre användbart, eftersom oavsett vad stryket nu påverkar formen på bokstaven som förstör den ursprungliga typen av formgivare. En inställning skulle vara perfekt, men om vi var tvungna att välja en, skulle slaglängden ha varit mycket mer användbar.
  • i Webkit, kan text-strokeanimeras med CSS-övergångar och animationer - men bara strokefärgen, inte strokebredden.
  • En mer webbläsarkompatibel (och utan tvekan robust) stand-in för text-strokeeffekten använder text-shadow, vilket beskrivs i denna CSS-Tricks-artikel.

Webbläsarstöd

Krom Safari Firefox Opera IE Android iOS
-webkit- -webkit- 21 15+ 10 Komplicerad -webkit-

En anmärkning om webbläsarstöd: Tabellen ovan är en sammanfattning av det totala webbläsarstödet för text-stroke- sanningen är mycket mer komplicerad (till exempel stödde Android egenskapen i version 2.1-2.3 och tog sedan bort stöd i 3.0, innan stödet återställdes i 4.0) . För fullständig webbläsarsupporttabell, besök caniuse.com/text-stroke.