CODEWITHSUNDEEP
sifrsifr3
Scott Vandehey
Scott Vandehey

Reputation: 262

How do I tell sIFR 3 to use different fonts for bold, italic, etc?

I've done some research, and it seems that if you're using a different font for the bold and italic variants of your sIFR font (as opposed to letting Flash fake it with the B and I buttons) then you have to include the fonts in your SWF, and then write code like this:

sIFR.replace(sentinel, {
  selector: '.intro p',
  css: [
    '.sIFR-root { font-family: "Sentinel-Medium"; }',
    'strong { font-family: "Sentinel-Bold"; }',
    'em { font-family: Sentinel-MediumItalic; }',
    'a { color: #0000ff; }',
    'a:hover { color: #ff0000; }'
  ]
});

When I do that, the flash movie comes up empty. I'm guessing this is just a syntax problem with my code. Any suggestions?

Update: I managed to get this mostly working (demo page) using the following code, but I can't get the nested styles to work properly. For example, I turned em text red and strong text blue -- but then if I try to set em text inside a strong to purple, it changes ALL ems to purple.

sIFR.replace(sentinel, {
  selector: '.sifr-test',
  css: [
    '.sIFR-root { font-family: "Sentinel Medium"; }',
    'strong { font-family: "Sentinel Bold"; font-weight: normal; color: #6666ff; }',
    'em { font-family: Sentinel Medium Italic; font-style: normal; color: #ff6666; }',
    'strong em { font-family: Sentinel Semibold Italic; font-weight: normal; font-style: normal; color: #ff66ff; }',
    'a { color: #0000ff; }',
    'a:hover { color: #ff0000; }'
  ]
});

Upvotes: 0

Views: 456

Answers (1)

Mark Wubben
Mark Wubben

Reputation: 3349

Not sure if you can do that, the CSS support in Flash isn't very advanced.

Upvotes: 1

Related Questions