text-stroketo eksperymentalna właściwość, która zapewnia opcje dekoracji tekstu podobne do tych, które można znaleźć w programie Adobe Illustrator lub innych aplikacjach do rysowania wektorowego. Obecnie nie jest uwzględniony w żadnej specyfikacji W3C ani WHATWG. Od czerwca 2013 r. Jest wdrażany tylko za -webkitprefiksem dostawcy, chociaż przyszłe wersje przeglądarek Firefox i Internet Explorer mogą obsługiwać tę właściwość (prawdopodobnie pod ich własnymi prefiksami).
mark ( -webkit-text-stroke: 2px red; )text-strokeNieruchomość jest właściwie skrótem dwóch innych właściwości:
text-stroke-width, który przyjmuje wartość jednostkową (1px, 0,125em, 4 cale itd.) i opisuje grubość efektu obrysu.text-stroke-color, który przyjmuje wartość koloru (hex, rgb / rgba, hsl / hsla, etcetera).
text-strokema również właściwość towarzyszącą text-fill-color, która zastąpi tę colorwłaściwość, umożliwiając wdzięczny powrót do innego koloru tekstu w przeglądarkach, które nie obsługują text-stroke.
Użyteczne miejsca
- Obrys narysowany przez
text-strokejest wyrównany do środka kształtu tekstu (tak jak jest to domyślne w programie Adobe Illustrator) i obecnie nie ma możliwości ustawienia wyrównania do wewnątrz lub na zewnątrz kształtu. Niestety, sprawia to, że jest znacznie mniej użyteczny, ponieważ bez względu na to, co teraz obrys koliduje z kształtem litery, niszcząc zamierzenia projektanta oryginalnego typu. Ustawienie byłoby idealne, ale gdybyśmy musieli wybrać jedno, uderzenie zewnętrzne byłoby znacznie bardziej przydatne. - w Webkit
text-strokemożna go animować za pomocą przejść i animacji CSS - ale tylko kolor obrysu, a nie jego szerokość. - Bardziej kompatybilny z przeglądarką (i prawdopodobnie solidny) stand-in dla
text-strokeefektu jest używanytext-shadow, co opisano w tym artykule CSS-Tricks.
Wsparcie przeglądarki
| Chrom | Safari | Firefox | Opera | TO ZNACZY | Android | iOS |
|---|---|---|---|---|---|---|
| -kitka- | -kitka- | 21 | 15+ | 10 | Skomplikowane | -kitka- |
Uwaga dotycząca obsługi przeglądarek: Powyższa tabela jest podsumowaniem ogólnej obsługi przeglądarek text-stroke- prawda jest dużo bardziej skomplikowana (na przykład Android obsługiwał tę właściwość w wersjach 2.1-2.3, a następnie usunął obsługę w wersji 3.0, przed przywróceniem obsługi w 4.0) . Pełną tabelę obsługi przeglądarek można znaleźć na caniuse.com/text-stroke.