Forum Moderators: not2easy
I have a fun question for you today.
I'm using Trajan Pro in my nav on a new site. Unfortunately, not everyone has the font, so the default family is Times. Also unfortunately, while Trajan Pro is an all caps font (small-caps, essentially), Times, obviously, is not. I would like to make the Times show up as font-variant: small-caps, but not the Trajan Pro (it looks terrible like that). So, is there a way to do this? My first idea looks like this, though it doesn't work...
.nav{
font: 'Trajan Pro' 12px, 'Times' 12px small-caps;
}
or something like that. I'd love to discuss this one out, because I think it would be a sweet functionality. Thanks!
pj
Yes, it is, in fact, already possible. :) However, the syntax is a tad different from what you just wrote. In specifying multiple font alternatives, you cannot define a separate size for each.
font: 1em Verdana, Helvetica, Arial, sans-serif;
...or...
font: 1em Georgia, 'Times New Roman', Times, serif;
The fallback principle is used when determining which font should be rendered. If the first specified font is available, it will be used. If not, the second font (if available) will be used. If not, the third, etc. It is therefore advisable to always end your font declaration with either
sans-serifserifmonospace
Also, make sure at least one common font (such as Times New Roman or Arial) is defined in addition to the "fancy" ones and the generic serif vs. sans-serif.
I too think that would be a nice function, can see your point about multiple choice fonts with variants..
Is there not an ability to embed fonts via CSS due out? if so this may address some of your issues, though support may take a while..
I'd say the answer to his question is NO, you cannot assign a size/style to 1 font, and if you don't have the font, assign a different size/style.
I would think this could be done with JS though, but maybe not.
