I’ve checked out a couple resources for getting sIFR 3 to work, and low and behold, it seems to be working with ease.. A lot easier to implement than it’s predecessor (sIFR 2).
According to this tutorial here, I should be adding my CSS information for the flash fonts within sifr-config.js.
This example code is copied and pasted from what I have working:
sIFR.replace(arial, {
selector: 'h3#slogan',
css: [ '.sIFR-root { font-size:12px; line-height: 5px; margin: 0px; padding: 0px; font-weight:bold; color:#575757; }'
],
});
This poses a couple questions..
1 - I haven’t been able to get the font-sizes to use em’s properly. It also doesn’t respect the font-size percentage I had set within my body tag in my CSS file.
2 - The h3 tags I have resized with this method seems to adjust the font properly, but the vertical margin doesn’t seem to have been adjusted. Franlky, it’s rather large and setting margin & padding to ‘0px’ doesn’t seem to do the trick.
FIXED Using “leading” inside sifr-config.js seemed to do the trick for multi-line purposes. Setting margin within sifr-screen.css also seemed to adjust margin’s fine, but this just leads me to more confusion.
3 - If I am to put my settings to manipulate the sIFR flash fonts within sifr-config.js, what do the settings within sifr-screen.css do? In particular, I’m referring to this code.. It seems to respect my margin’s set here, but nothing else really..
4 - sIFR 3 Documentation states to think very hard on whether to set “font-size” within .sIFR-root in sifr-config.js because it breaks scaling. How do I control font-sizes and keep scaling intact than?
.sIFR-active h3#slogan {
visibility: hidden;
font-family: Arial;
line-height: 1.4em;
font-weight: 1.2em;
}
Is this used to control what is displayed for when sIFR is not compatible with the browser? Meaning, if sIFR is not displayed, it reverts back to normal text and uses these settings accordingly?
Finally, am I able to manipulate sIFR flash font sizes within sifr-screen.css? I’ve gotten it to work to a degree, but any tweaks I’m making aren’t working at all, so essentially, it’s a set and done deal.. And I am aware that it is more flexible than that.
Cheers,
Danny
