It’s nearly the holiday season, and what better gift to give your website visitors than sprucing things up with, what else, @font-face?! Jonathon Snook comes across a really great technique for trimming the fat from font files and avoiding FOUT! In addition to showing how to remove characters you don’t need for your website, he shows a slick method of avoiding unnecessary mark-up in order to style special (or, in this case, single) characters. Essentially, by creating a font file that only has the special (or single) characters, you can then use that font as the primary choice in your font stack; the special/single characters will get the primary font, while the others will get the next font that’s available! As an example, we have a “Custom Font” file that only has the ampersand character.
The CSS:
p { font-family: 'Custom Font', Arial, sans-serif; }
And the HTML:
<p>Handcrafted pixels & text from Salem, Massachusetts.</p>
Since the “Custom Font” font file only has the ampersand, the primary choice in our font stack, “Custom Font”, will only be applied to the ampersand; all others will get either Arial or the generic sans-serif… And because it’s Snook, he goes one step further by converting the @font-face to Base64 to avoid the additional HTTP Request… Nice…
Another 24Ways article, this time from Rachel Andrew, shows how to start using CSS3 Selectors now, where you can, and sprinkle a little jQuery to help where you can’t… Turns out nth-child is pretty powerful… At first it might seem a little redundant, why not just rely on jQuery to do it everywhere if you have to use it at all, but with a little help from something like Modernizr, you could fire the jQuery function only if nth-child is not available in that user’s browser, thus saving a little bit o’ resources…
And to wrap-up this stream of CSS-themed items, Opera is apparently continuing their efforts to be at the forefront of innovation, by adding even more CSS3 to their browser. Nice work, guys & gals!
Happy Reading,
Atg