Как заставить цвета работать в sIFR 3 r436? - PullRequest
Новая
       9

Как заставить цвета работать в sIFR 3 r436?

0 голосов
/ 01 декабря 2009

У меня есть демонстрационная страница здесь ; Вы можете просмотреть источник, чтобы увидеть, что я пытаюсь сделать.

Как видите, все в нем работает, кроме цветов. Я пытаюсь установить синий цвет (# 0000ff), но он остается черным. Я создал собственный SWF-файл для своего шрифта, добавив четыре различных варианта одного шрифта, чтобы приспособить их к этим инструкциям для разных стилей (поскольку это семейство шрифтов содержит обычный, полужирный, курсив и полужирный курсив как четыре непересекающихся имени шрифта).

Для потомков я вставлю часть исходного кода с той демонстрационной страницы, на которую я ссылаюсь здесь: 

<style type="text/css">
h1.sifr {
    color: #0000ff;
    font-family: 'Myriad Pro';
    font-size: 1.75em;
    margin-bottom: 0;
}
</style>
<script type="text/javascript">
var myriad_pro = {src: 'myriad_pro.swf'};
sIFR.activate(myriad_pro);
sIFR.replace(myriad_pro, {
    selector: 'h1.sifr',
    css: {
        '.sIFR-root': {'color': '#0000ff', 'font-family' : 'Myriad Pro'},
        'em': {'color': '#0000ff', 'font-family' : 'Myriad Pro Italic' , 'font-style' : 'plain'},
        'strong': {'color': '#0000ff', 'font-family' : 'Myriad Pro Bold' , 'font-weight' : 'normal'},
        'em strong, strong em': {'color': '#0000ff', 'font-family' : 'Myriad Pro Bold Italic' , 'font-style' : 'plain', 'font-weight' : 'normal'}}
    }
);
</script>

Что я забыл? Как заставить цвета работать?

Ответы [ 3 ]

0 голосов
/ 04 декабря 2009

Возможно, вам потребуется прописать значения цветов в верхнем регистре, и не должно ли это быть font-style: normal, а не plain?

0 голосов
/ 04 декабря 2009

Хорошо, извините, ребята. Оказывается, я слишком много думал об этом. В итоге я реэкспортировал свой SWF-файл (я думаю, что я мог сделать это несколько неправильно в первый раз) и значительно потерял свой JavaScript. Я по-прежнему включил встроенную копию всех «четырех» шрифтов в файл Flash - я установил для основного динамического текстового поля Myriad Pro / Regular, а затем создал еще 3 динамических текстовых поля (без текста) с полужирным шрифтом. , Курсив и полужирный курсив соответственно. Затем я убедился, что нажал «Внедрение символов» на всех них и убедился, что нужные символы были включены.

Наконец-то мой JavaScript в итоге выглядел так: 

<script type="text/javascript">
var myriad_pro = {src: 'myriad_pro.swf'};
sIFR.activate(myriad_pro);
sIFR.replace(myriad_pro, {
    selector: 'h1.sifr',
    css: {
        '.sIFR-root': {'color': '#0000ff'}
    }
});
</script>

Мне не нужно было менять шрифты или что-то еще, но мне все равно нужно было убедиться, что все четыре включены в файл Flash. Оглядываясь назад, кажется странным, что сработало , когда я сказал font-family: "Myriad Pro Italic" и т. Д., Поскольку это технически не название шрифта. Но по любой причине, которая вызвала конфликт с цветами, поэтому, когда я просто назвал его простым старым «Myriad Pro» и позволил ему выделить курсив и полужирный шрифт, тогда все заработало. И @Mark - шестнадцатеричные коды в нижнем / верхнем регистре цвета не имеют значения. Однако должен быть полным 6-значным шестнадцатеричным кодом (т. Е. # 00f не будет работать).

0 голосов
/ 01 декабря 2009

у меня это работает здесь . Единственное отличие состоит в том, что мой текст SIFR заключен в ссылки, и он меняет цвет при наведении курсора мыши.

Мой скрипт выглядит так: 

 <script language="javascript" type="text/javascript">
        //sIFR.useStyleCheck = true;
        var eurostile = {
            src: '/images/eurostile.swf'};
        sIFR.activate(eurostile);
        sIFR.replace(eurostile , {selector: "div#mainNav li", wmode: "transparent", 
        css: [
             'a { text-decoration: none; color: #666666; }'
            ,'a:link { color: #666666; }'
            ,'a:hover { color: #00299b; }'
        ]});
        sIFR.replace(eurostile , {selector: "div.menuHeadingText", wmode: "transparent"
        ,css: [
            '.sIFR-root { color: #FFFFFF; }',
            'a { text-decoration: none; color: #FFFFFF; }'
            ,'a:link { color: #FFFFFF; }'
            ,'a:hover { color: #FF5A00; }'
        ]});

        sIFR.replace(eurostile , {selector: "h2.boxHeading", wmode: "transparent"
        ,css: [
            '.sIFR-root { color: #666666; }'
        ]});

Надеюсь, это поможет.

/ Klaus

...