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.
... continue reading