sIFR - Scalable Inman Flash Replacement
http://www.mikeindustries.com/sifr
使用 Flash 內嵌字型來顯示文字
sIFR (Scalable Inman Flash Replacement) 是一種透過 Flash 在網頁上顯示特殊字型的方式,傳統在網頁標題或內文上,如果要用一些特殊字型來做編排,通常會使用圖檔來取代文字。而 sIFR 可以使用 Flash 和 JavaScript 來把網頁中的文字以內嵌在 Flash 內的字型來顯示,好處是這些文字仍可以被搜尋和選取、複製,另外如果你的字型檔案相對的是比較小的,使用 sIFR 也會比使用圖檔所耗用的頻寬還小。
這個概念先前是由 Shaun Inman 所提出,他分享的 IFR (Inman Flash Replacement) 可以置換一行的文字,而 Mike Davidson 修改這個程式後,發佈了 sIFR,除了可一次替換多行文字,還可以有更多的設定如文字大小等等,詳細的設定可以參考下載檔內的文件。以下是一個簡單的範例:
Welcome to jsGears.com
如果 Flash 和 JavaScript 正常運作的話,上面這一行標題字所顯示的字體會由預設字體 (Arial) 改為 Gothic。
HTML 的部份如下:
<script type="text/javascript" src="sifr.js"></script>
<div id="sifr">Welcome to jsGears.com</div>
還有一些 css 要設定,這幾個 style 可以讓原本的文字在替換後隱藏起來:
.sIFR-flash {
visibility: visible !important;
margin: 0;
}
.sIFR-replaced {
visibility: visible !important;
}
span.sIFR-alternate {
position: absolute;
left: 0;
top: 0;
width: 0;
height: 0;
display: block;
overflow: hidden;
}
#sifr {
text-align: center;
padding: 30px 0;
}
JavaScript 的部份如下:
if(typeof sIFR == "function"){
sIFR.replaceElement(named({sSelector:"#sifr",
sFlashSrc:"vandenkeere.swf", sColor:"#000000", sLinkColor:"#000000",
sBgColor:"#FFFFFF", sHoverColor:"#CCCCCC", nPaddingTop:20, nPaddingBottom:20,
sFlashVars:"textalign=center&offsetTop=6"}));
};
|