Targetting specific characters with CSS rules
3 days ago
- #Typography
- #CSS
- #Web Design
- CSS cannot directly target specific characters like 'E' for styling.
- A secret method involves using `@font-face` with `unicode-range` to target specific Unicode characters (e.g., vowels).
- The technique allows applying different fonts or styles to selected characters without extra markup.
- Modern fonts (WOFF2) support multi-colored characters via the COLR table.
- Example: A colorful pixel font can target uppercase letters for unique styling.
- Limitations: Mostly restricted to font adjustments (e.g., `size-adjust`).
- Use cases include stylistic embellishments (e.g., ampersands) or language-specific font loading.
- Community reactions highlight creative (and 'evil') applications of this CSS trick.