text-strokeείναι μια πειραματική ιδιότητα που παρέχει επιλογές διακόσμησης κειμένου παρόμοιες με αυτές που υπάρχουν στο Adobe Illustrator ή σε άλλες εφαρμογές σχεδίασης φορέα. Προς το παρόν δεν περιλαμβάνεται σε καμία προδιαγραφή W3C ή WHATWG. Από τον Ιούνιο του 2013, εφαρμόζεται μόνο πίσω από ένα -webkitπρόθεμα προμηθευτή, αν και μελλοντικές εκδόσεις του Firefox και του Internet Explorer ενδέχεται να υποστηρίζουν την ιδιότητα (πιθανότατα με τα προθέματά τους).
mark ( -webkit-text-stroke: 2px red; )Το text-strokeακίνητο είναι στην πραγματικότητα στενό για δύο άλλες ιδιότητες:
text-stroke-width, η οποία λαμβάνει τιμή μονάδας (1px, 0.125em, 4in, κ.λπ.) και περιγράφει το πάχος του φαινομένου της διαδρομής.text-stroke-color, που παίρνει μια τιμή χρώματος (hex, rgb / rgba, hsl / hsla, κλπ.).
text-strokeέχει επίσης μια συνοδευτική ιδιότητα, η text-fill-colorοποία θα παρακάμψει την colorιδιότητα, επιτρέποντας μια χαριτωμένη εναλλαγή σε διαφορετικό χρώμα κειμένου σε προγράμματα περιήγησης που δεν υποστηρίζουν text-stroke.
Σημεία ενδιαφέροντος
- Η διαδρομή που
text-strokeέχει σχεδιαστεί ευθυγραμμίζεται στο κέντρο του σχήματος κειμένου (όπως είναι η προεπιλογή στο Adobe Illustrator) και προς το παρόν δεν υπάρχει επιλογή να ρυθμίσετε την ευθυγράμμιση στο εσωτερικό ή το εξωτερικό του σχήματος. Δυστυχώς, αυτό το καθιστά πολύ λιγότερο χρησιμοποιήσιμο, καθώς δεν έχει σημασία τι το εγκεφαλικό επεισόδιο παρεμβαίνει στο σχήμα του γράμματος καταστρέφοντας την πρόθεση των αρχικών σχεδιαστών τύπου. Ένα σκηνικό θα ήταν ιδανικό, αλλά αν έπρεπε να επιλέξουμε ένα, το εξωτερικό περίγραμμα θα ήταν πολύ πιο χρήσιμο. - στο Webkit,
text-strokeείναι animatable με CSS Transitions και Animations - αλλά μόνο το χρώμα περιγράμματος, όχι το πλάτος διαδρομής - Χρησιμοποιείται ένα πιο συμβατό με το πρόγραμμα περιήγησης (και αναμφισβήτητα στιβαρό) stand-in για το
text-strokeεφέtext-shadow, το οποίο περιγράφεται σε αυτό το άρθρο CSS-Tricks.
Υποστήριξη προγράμματος περιήγησης
| Χρώμιο | Σαφάρι | Firefox | ΛΥΡΙΚΗ ΣΚΗΝΗ | ΙΕ | Android | iOS |
|---|---|---|---|---|---|---|
| -webkit- | -webkit- | 21 | 15+ | 10 | Περίπλοκος | -webkit- |
Μια σημείωση για την υποστήριξη του προγράμματος περιήγησης: Ο παραπάνω πίνακας είναι μια σύνοψη της συνολικής υποστήριξης του προγράμματος περιήγησης text-stroke- η αλήθεια είναι πολύ πιο περίπλοκη (για παράδειγμα, το Android υποστήριξε την ιδιότητα στις εκδόσεις 2.1-2.3 και στη συνέχεια αφαίρεσε την υποστήριξη στο 3.0, προτού επαναφέρει την υποστήριξη στο 4.0) . Για τον πλήρη πίνακα υποστήριξης του προγράμματος περιήγησης, επισκεφθείτε τη διεύθυνση caniuse.com/text-stroke.