You can't. There is no way to use CSS to apply a style to every letter "E". It simply can't be done.
At least, that's what they want you to think…
What if I told you there was a secret and forbidden way to target specific characters in text and apply some styles to them?
As part of my experiments in creating a "drunk" CSS theme, I thought it would be useful to change the presentation of specific characters. Wouldn't it be fun to have every letter "a" look slightly different to the rest of the text?!
So here's how you can apply limited CSS styles to certain characters while leaving the rest of the text unchanged, and without having to wrap characters in extra markup.
CSS
@font-face { font-family: "Different"; src: url("whatever.woff2") format("woff2"); /* Lower-Case Vowels */ unicode-range: U+61, U+65, U+69, U+6F, U+75 ; } body { font-family: "Different", sans; }
This creates a new font-family called "Different". It loads a unique font. It is applied to specific Unicode characters - in this case: a, e, i , o, and u.
The body places this font-family first and then defaults to a different family. This means all the lower-case vowels will use one font, and every other character will use something else.
That's… OK. I guess? Having certain characters as Garamond and the others as Times New Roman isn't exactly exciting, is it?
Sadly, there only other thing we can do in CSS to spice things up is to monkey around with size-adjust which lets the text be scaled up or down.
But modern fonts are pretty magic, you know!
The WOFF2 format has a new(ish) COLR table which allows you to create multi-coloured fonts. That means it is possible to target specific characters and have them display in living colour.
For example, using this colourful pixel font by Patrick H. Lauke (CC BY), I can target the Unicode Range of upper-case characters.
The above CSS only changes the appearance of UPPER Case characters!
To wrap things up - yes, you can target specific characters with CSS rules. Sadly, you're pretty much limited to fiddling around with their fonts.
9 thoughts on “Targetting specific characters with CSS rules”
Congratulations, this is evil, no notes 😀
| Reply to original comment on bsky.app
Very cool! I use this technique to load only the Hebrew and Arabic fonts from some monospaced fonts for editing Wikipedia without forcing me to use those fonts' Latin characters, but I'd never thought to use it for something like the range of capital letters.
(I also didn't know I could use
size-adjustin those rules. I'm gonna have to experiment with that!)@Edent Historically, it was *very* (well, kinda) common to embellish ampersands this way. (Ironically, the "nice" ampersand was often pushed to fonts that had nearly identical ampersand to the one "borrowed" built-in, under some style-set. But it's a different story.) One remark: usually, it is not needed to make an extra font-family including the single face containing the tiny character subset: you can just subset the ranges in the **same** "main" family through a "ranged" face.
| Reply to original comment on typo.social
@Edent i do love me some quality CSS crimes
| Reply to original comment on furry.engineer
That's the coolest thing ever 🤯
| Reply to original comment on app.wafrn.net
Thats so cursed. Quick nobody look at this no more CSS crimes in wafrn
| Reply to original comment on app.wafrn.net
@blog I used this once to get serif quotation marks in otherwise sans serif text ☕
| Reply to original comment on gts.skobk.in
@Edent forgejo and codeberg do this for Korean, Japanese, and Chinese, because Google's Noto fonts only include one language at a time for whatever reason.
| Reply to original comment on tooot.im
D7460N
Wow! Didn't know this was possible. Curious whether combining this technique with :has() would allow for real-time validation of dynamic or user-generated content.
More comments on Mastodon.
What links here from around this blog?