sifr demo

Sifr (Scalable Inman Flash Replacement) to biblioteka składająca się z kilku plików w skład których wchodzą skrypty javascript i pliki .swf.

We flashowych plikach przechowywane są wyeksportowane pliki czcionek oraz skrypt AS, to dzięki nim możemy wstawić tekst z dowolną wybraną przez nas czcionką.

Użycie

Otwieramy plik .fla dostarczony do biblioteki. Klikamy dwa razy na pustą przestrzeń następnie zaznaczamy pole tekstowe i wybieramy z menu czcionek pożądaną czcionkę . Kolejno klikamy File->Export->Movie Export, nadajemy mu nazwę i zapisujemy.

Jeżeli nie posiadamy flasha możemy skorzystać z generatora online.

Wszystkie pliki z katalogu sifr wgrywamy na serwer i w tagu header wpisujemy:

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

I edytujemy plik sifr-config.js, w którym tworzymy nową zmienną, np customfont, która będzie zawierać ścieżkę do naszego pliku .swf z czcionką.

var customfont = {
  src: 'http://w3labs.pl/czcionki/naszaczcionka.swf'
};

Następnie musimy aktywować naszą czcionkę i podmienić element dokumencie. W tym samym pliku wpisujemy dalej:

    sIFR.activate(customfont);
    sIFR.replace(customfont, {
      selector: 'h1'
    });

W całym dokumencie może tylko jedno polecenie activate, jeżeli chcemy aktywować więcej czcionek wymieniamy je po prostu po przecinku, tak jak poniżej.

    sIFR.activate(czcionka1,czcionka2,...,czcionkaN);

Selector, jest selektorem css który wybiera elementy i podmienia w nich czcionkę (obsługiwane selektory).
Ostatnim elementem jest utworzenie dokumentu css w którym określimy kolor czcionki, jej wielkość oraz kolor tła.

h1
{
    color: blue;
    font-size: 24px;
    background: #fff;
}

Demo: http://dev.novemberborn.net/sifr3/svn/test/distribution/demo/

Do pobrania: http://dev.novemberborn.net/sifr3/nightlies/

Pełna dokumentacja: http://wiki.novemberborn.net/sifr3/