2010-10-06 56 views
0

我想使用sIFR 3.我得到它的工作,並可以做一些樣式,如更改字體大小。但如果我嘗試改變顏色或重量,則沒有任何變化。我不明白我在做什麼,可以讓一些樣式起作用,有些不會。sIFR 3 - 不能爲顏色,重量等風格

我的HTML是:

<html> 
<head> 
<title>Test sifr</title> 
<link rel="stylesheet" href="sifr.css" type="text/css"> 
<script src="sifr.js" type="text/javascript"></script> 
<script src="sifr-config.js" type="text/javascript"></script> 
</head> 

<body> 
Starting...<br> 
<span class='testsifr'>Testing #2</span><br><br> 
Finished.<br> 
</body> 
</html> 

我的sIFR-config.js是:

var gotham = { src: 'GothamMBLCond.swf' }; 

sIFR.activate(gotham); 

sIFR.replace(gotham, { 
    selector: 'span.testsifr' 
    ,css: [ 
    'span.testsifr{ color:#0000FF; font-weight:bold;}' 
    ] 
}); 

我sIFR.js是:

@media screen { 
    .sIFR-flash { 
    visibility: visible !important; 
    margin: 0; 
    padding: 0; 
    } 

    .sIFR-replaced, .sIFR-ignore { 
    visibility: visible !important; 
    } 

    .sIFR-alternate { 
    position: absolute; 
    left: 0; 
    top: 0; 
    width: 0; 
    height: 0; 
    display: block; 
    overflow: hidden; 
    } 

    .sIFR-replaced div.sIFR-fixfocus { 
    margin: 0pt; 
    padding: 0pt; 
    overflow: auto; 
    letter-spacing: 0px; 
    float: none; 
    } 
} 

@media print { 
    .sIFR-flash { 
    display : none !important; 
    height  : 0; 
    width  : 0; 
    position : absolute; 
    overflow : hidden; 
    } 

    .sIFR-alternate { 
    visibility : visible !important; 
    display : block !important; 
    position : static !important; 
    left  : auto !important; 
    top  : auto !important; 
    width  : auto !important; 
    height  : auto !important; 
    } 
} 

/* 
Place CSS rules for to-be-replaced elements here. Prefix by .sIFR-active 
so they only apply if sIFR is active. Make sure to limit the CSS to the screen 
media type, in order not to have the printed text come out weird. 
*/ 
@media screen { 
    .sIFR-active span.testsifr { 
    font-family: Verdana; 
    visibility: hidden; 
    font-size:48px; 
    color:#0000FF; 
    font-weight:bold; 
    } 
} 

正如我所說,它呈現細,但是用黑色而不是藍色,並且用重量而不是粗體。我知道我指示它在.js和.css文件中都變成藍色/粗體,但我已經單獨嘗試了每個地方,並獲得相同的結果。但是我可以將大小從48px更改爲其他值,並且字體大小更改會生效。爲什麼我的顏色&重量變化不生效?有任何想法嗎?

湯姆

回答

1
var gotham = { src: 'GothamMBLCond.swf' }; 

sIFR.activate(gotham); 

sIFR.replace(gotham, { 
    selector: '.testsifr', 

    css: ['.sIFR-root {color: #0000FF; font-size: 16px; background-color: #CCCCCC; }', 
     'a { text-decoration: none; }', 
     'a:link { color: #000000; }', 
     'a:hover { color: #FF4B33; }', 
     'strong { font-weight: bold; color: #0000FF; }', 
     'em { font-style: italic; color: #0000FF; }', 
     'strong em { font-style: italic; font-weight: bold; color: #0000FF; }', 
    ], 

    forceWidth: true, fitExactly: false, 

    filters: { 
     DropShadow: { 
      knockout: false 
      ,distance: 2 
      ,color: '#333333' 
      ,strength: 2 
      ,alpha: .6 
      ,blurX: 3 
      ,blurY: 3 
     } 
    } 
}); 

複製上面的代碼,它會給你很多的選擇做什麼;)另外:我幾乎從來不使用的CSS文件,我通常會創建一個新的CSS文件在哪裏手動校正閃光物體的位移,在你的情況下,將是(例如)

.testsifr object { 
    padding: 0; margin: 0; line-height: 0; margin-top: -10px; 
}