SIFR 3 - не подходит для цвета, веса и т. д. - PullRequest
Новая
       64

SIFR 3 - не подходит для цвета, веса и т. д.

0 голосов
/ 07 октября 2010

Я пытаюсь использовать 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 на другие значения, и изменение размера шрифта вступит в силу. Почему мои изменения цвета и веса не вступят в силу? Есть идеи?

Tom

1 Ответ

1 голос
/ 03 декабря 2010 
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;
}
...