Ο προσβάσιμος τρόπος
Το καλύτερο στοίχημά σας είναι να παρακολουθήσετε το βίντεο 5 λεπτών του Ethan και στη συνέχεια να το αναφέρετε:
Ο τρόπος cross-browser (επιπλέον σήμανση)
Απλώς τυλίξτε τον πρώτο χαρακτήρα της παραγράφου σε ένα διάστημα και, στη συνέχεια, στοχεύστε το εύρος με CSS και το στυλ μακριά.
L orem ipsum dolor sit amet, consectetur adipiscing elit.
.firstcharacter ( color: #903; float: left; font-family: Georgia; font-size: 75px; line-height: 60px; padding-top: 4px; padding-right: 8px; padding-left: 3px; )Ο τρόπος CSS3 (χωρίς επιπλέον σήμανση)
Στοχεύστε τον πρώτο χαρακτήρα της πρώτης παραγράφου χρησιμοποιώντας ψευδο-επιλογείς τάξης. Δεν απαιτείται επιπλέον σήμανση, αλλά δεν υπάρχει υποστήριξη IE <9.
Just a normal sentence.
p:first-child:first-letter ( color: #903; float: left; font-family: Georgia; font-size: 75px; line-height: 60px; padding-top: 4px; padding-right: 8px; padding-left: 3px; )Ο initial-letterτρόπος
Η υποστήριξη του προγράμματος περιήγησης initial-letterείναι αρκετά αραιή κατά τη στιγμή αυτής της γραφής, αλλά μπορεί να χρησιμοποιηθεί για τον υπολογισμό του αριθμού των γραμμών που πρέπει να καταλαμβάνει το γράμμα με την πτώση και το μέγεθος της γραμματοσειράς αντί να το κάνετε μόνοι σας.
p:first-child:first-letter ( color: #903; font-family: Georgia; initial-letter: 2; )Υποστήριξη προγράμματος περιήγησης
Αυτά τα δεδομένα υποστήριξης του προγράμματος περιήγησης προέρχονται από την Caniuse, η οποία έχει περισσότερες λεπτομέρειες. Ένας αριθμός υποδεικνύει ότι το πρόγραμμα περιήγησης υποστηρίζει τη λειτουργία σε αυτήν την έκδοση και νεότερη.
Επιφάνεια εργασίας
| Χρώμιο | Firefox | ΙΕ | Ακρη | Σαφάρι |
|---|---|---|---|---|
| Οχι | Οχι | Οχι | Οχι | TP * |
Κινητό / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| Οχι | Οχι | Οχι | 14.0-14.4 * |