Question

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

汤姆

Answer 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;
}

sIFR 3 - 不能为颜色，重量等设计样式

1 个答案: