Äntligen!
Idag släppte Mike Davidson och kompani sIFR 2.0
sIFR (Scalable Inman Flash Replacement) är en metod som ger dig som webbdesigner tillgång till i stort sett vilket typsnitt som helst för rubriker, bildtexter och liknande.
Metoden bygger på att man skapar en kort Flash-fil (utifrån en mall) för varje typsnitt man vill använda. Därefter länkar man in en javascriptfil, och kopplar ihop sina taggars utseende (mha CSS-selektorer, klasser eller id:n) med typsnitten via några enkla javascriptfunktionsanrop.
Men Flash… - är du full eller ?
Hmm..
Andas lite nu så skall jag förklara…
sIFR bygger på att man helt enkelt låter ett litet Javascript byta ut innehållet i vissa taggar mot flash-objekt som ritar upp innehållet (texten) i taggarna som en Flash-film. Principen är enkel - och många av oss har väl använt bilder på samma sätt sedan när de typsnitt man har velat använda inte har funnits med bland de “webbsäkra”.
Skillnaden mellan sIFR-metoden att använda bilder för text, är att texter som skapats med bilder inte kommer att skalas om i samband med användarens inställngar för teckenstorlek i webbläsaren - men att texter man formatterar med sIFR gör det automatiskt!
Exempel
Säg att du har en h3:a som du vill visa upp med ett skojsigt typsnitt. Med sIFR kodar du den helt enkelt som en vanlig rubrik såhär:
<h3>Detta är en rubrik</h3>
Därefter deklarerar du utseendet för h3 i din CSS-fil samt lägger till några deklarationer för sIFR - och till sist lägger du in en script-tagg som talar om att alla h3-taggar skall bytas ut mot det typsnitt du valt…
I head:
<link rel="stylesheet" href="sIFR-screen.css" type="text/css" media="screen" />
<link rel="stylesheet" href="sIFR-print.css" type="text/css" media="print" />
<script src="sifr.js" type="text/javascript"></script>
<script src="sifr-addons.js" type="text/javascript"></script>
och i samband med att sidan laddats klart:
<script type="text/javascript">
if(typeof sIFR == "function"){
sIFR.replaceElement(named({sSelector:"body h3", sFlashSrc:"typsnitt.swf"}));
};
</script>
Jaha - och vad vinner jag på det där då ?
Jo - Alltså. För det första så kommer sidan du underhåller fortfarande bara att innehålla din text. Det vill säga att om besökaren då inte har Flash installerat (eller om besökaren är t.ex. en sökmotor) så kommer denne att se texten så som sidan hade sett ut utan något “flashigt ;) ” typsnitt…
Men har besökaren Flash installerat, kommer javascriptkoden i den fil du länkade in att se till att den area på skärmen där h3-texten skulle ha funnits, kommer att förses med ett skalat Flash-objekt som innehåller en “anpassad” text i det typsnitt du valt vars yttre dimensioner motsvarar den area som texten skulle ha tagit upp om sidan inte utökats med sIFR
Det här innebär att även du som kör med relativa typsnittsstorlekar kan vara säker på att de “fina” typsnitt du förser din sida med kommer att förstoras/förminskas de med när användaren manipulerar textstorleken i webbläsaren! - och att du inte längre behöver skapa en massa bilder dynamiskt bara för att du vill ha ett snyggt typsnitt på rubrikerna i din Blogg eller på ditt forum…
Och inga “döda-bild-kryss” riskerar man heller… ;)
Men vänta nu - Jag har ju inte Flash, hur gör jag typsnittsfilmerna?
Man hinner göra ganska många typsnittsfilmer med en 30-dagars Flash-trial från Macromedia - och gratis TrueType-typsnitt finns det t.ex. en hel del länkar till tillochmed här på xhtml.se om du bläddrar bakåt lite i tiden ;)
Jasså - du är inte övertygad ännu?
Jaja - seeing is believing heter det ju…
Kolla källkoden (och utseendet) på det här exemplet och låt dig inspireras ;)
