Hi there,

I'm having problems trying to set a font-size in sifr to 160px, but it won't render any larger than half of what the size i wish to acquire. Any ideas?

2 answers

0
points

As I understand it you need to give the decoy text a pixel value. It looks like you're using ems.

it says:

If you're using relative sizing for your font values in your regular CSS, the first thing you'll want to do is place pixel sizes into the font-size values of your decoy styles. This will give you a more level playing field. (Keep in mind that increasing and decreasing the pixel size in the decoy style can also change the size of your sIFR replacement text.) From there, you can begin tweaking the letter-spacing and then the line-height. This order seems to work well.

here: http://wiki.novemberborn.net/sifr/How+to+use

and if I use firebug to edit your css here:

h4.letter {
        font-family: Geneva, "Lucida Sans", "Lucida Grande", "Lucida Sans Unicode", Verdana, sans-serif;
        color:   #5bc6e8;
        font-size: 16em;
        font-weight:  normal;
        margin:  0 162px 0;
}

to

h4.letter {
        font-family: Geneva, "Lucida Sans", "Lucida Grande", "Lucida Sans Unicode", Verdana, sans-serif;
        color:   #5bc6e8;
        font-size: 160px;
        font-weight:  normal;
        margin:  0 162px 0;
}

it looks much closer to what I think you mean.

Of course I could be way off target.

Answered about 7 years ago by Tony Crockford
  • I've tried the method you suggested above and changed the font size on my css to as close to the desired size I want but the sifr text is still small. h4.letter { font-family: "myriad pro"; color: #5bc6e8; font-size: 195px; line-height: 1em; font-weight: normal; margin: 0 162px 0; } sifr config: sIFR.replace(myriadPro_reg, { selector: 'h4.letter', css: ['.sIFR-root { color: #5bc6e8; font-size: 195px; }'], wmode: 'transparent', ratios: '6, 1.24, 7, 1.21, 8, 1.18, 10, 1.16, 1, 1.13, 12, 1.12, 13, 1.11, 15, 1.1, 17, 1.09, 19, 1.08, 22, 1.07, 26, 1.06, 32, 1.05, 41, 1.04, 58, 1.03, 97, 1.02, 1.01' }); Caleb Wong about 7 years ago
0
points

Tried to add a comment, but too much for comment type, so:

it works in Firefox on my Mac - but in Safari it is too small still, but I think that's because the flash object is only 134px high.

this is the inspect element result for that:

<object class="sIFR-flash" type="application/x-shockwave-flash" id="sIFR_replacement_0" name="sIFR_replacement_0" data="swf/myriadPro_reg.swf" width="1001" height="134">
<param name="flashvars" value="id=sIFR_replacement_0
&amp;content=A
&amp;width=1001
&amp;renderheight=134
&amp;link=
&amp;target=
&amp;size=195
&amp;css=.sIFR-root%257Bcolor%253A%25235bc6e8%253B%257D
&amp;cursor=default
&amp;tunewidth=0
&amp;tuneheight=0
&amp;offsetleft=
&amp;offsettop=
&amp;fitexactly=false
&amp;preventwrap=false
&amp;forcesingleline=false
&amp;antialiastype=
&amp;thickness=
&amp;sharpness=
&amp;kerning=
&amp;gridfittype=pixel
&amp;flashfilters=
&amp;opacity=100
&amp;blendmode=
&amp;selectable=true
&amp;fixhover=true
&amp;events=false
&amp;delayrun=false
&amp;version=436">
<param name="wmode" value="transparent"><param name="bgcolor" value="transparent"><param name="allowScriptAccess" value="always"><param name="quality" value="best">
</object>

where did you get the swf? I think the vars encoded within need tweaking.

Answered about 7 years ago by Tony Crockford
  • this might be relevant: http://gbradley.co.uk/2009/10/03/sifr-height-issue/ or at least set you down the right path? Tony Crockford about 7 years ago
  • I'm using sIFR3-r436 and it doesn't have those files mentioned in the above link. I've just changed the font in the sIFR.fla file to Myriad Pro. Didn't alter any settings. Caleb Wong about 7 years ago