"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 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."
Use @font-face with unicode-range to assign a different font to specific Unicode codepoints, such as vowels, without wrapping characters in extra markup. Place the alternate font-family first in the font stack so targeted characters render with the alternate glyphs while other characters fall back to the default font. Only font-level attributes can be changed this way; CSS cannot directly apply arbitrary styles to individual letters. size-adjust can rescale fonts, and modern WOFF2 COLR fonts can provide multi-colored glyphs. Combining unicode-range targeting with COLR/WOFF2 fonts enables per-character color and appearance variations, limited by available glyphs in the alternate font.
Read at Terence Eden's Blog
Unable to calculate read time
Collection
[
|
...
]