0

我正在尝试使用 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 更改为其他值，并且字体大小更改确实生效。为什么我的颜色和重量更改不会生效？有任何想法吗？

汤姆

4

1 回答 1

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 文件，在其中手动更正 flash 对象的位移，在您的情况下将是（例如）

.testsifr object {
    padding: 0; margin: 0; line-height: 0; margin-top: -10px;
}
于 2010-12-03T14:31:57.237 回答