sIFR - 使用 Flash 內嵌字型來顯示文字
[img]http://jsgears.com/_icons/famfamfam/folder.gif[/img] sIFR - Scalable Inman Flash Replacement[img]http://jsgears.com/_icons/famfamfam/icon_home.gif[/img] [url]http://www.mikeindustries.com/sifr[/url]
[img]http://jsgears.com/_icons/famfamfam/comment.gif[/img] 使用 Flash 內嵌字型來顯示文字
sIFR (Scalable Inman Flash Replacement) 是一種透過 Flash 在網頁上顯示特殊字型的方式,傳統在網頁標題或內文上,如果要用一些特殊字型來做編排,通常會使用圖檔來取代文字。而 sIFR 可以使用 Flash 和 JavaScript 來把網頁中的文字以內嵌在 Flash 內的字型來顯示,好處是這些文字仍可以被搜尋和選取、複製,另外如果你的字型檔案相對的是比較小的,使用 sIFR 也會比使用圖檔所耗用的頻寬還小。
這個概念先前是由 Shaun Inman 所提出,他分享的 [url=http://www.shauninman.com/archive/2004/04/23/ifr_revisited_and_revised]IFR[/url] (Inman Flash Replacement) 可以置換一行的文字,而 Mike Davidson 修改這個程式後,發佈了 sIFR,除了可一次替換多行文字,還可以有更多的設定如文字大小等等,詳細的設定可以參考下載檔內的文件。以下是一個簡單的範例:
[jsg.example]
<style type="text/css">
.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;
}
</style>
<div id="sifr">Welcome to jsGears.com</div>
<script type="text/javascript" src="_lib/others/sIFR2/sifr.js"></script>
<script type="text/javascript">
window.onload = function() {
if(typeof sIFR == "function"){
sIFR.replaceElement(named({sSelector:"#sifr",
sFlashSrc:"_lib/others/sIFR2/vandenkeere.swf", sColor:"#000000", sLinkColor:"#000000",
sBgColor:"#FFFFFF", sHoverColor:"#CCCCCC", nPaddingTop:20, nPaddingBottom:20,
sFlashVars:"textalign=center&offsetTop=6"}));
};
}
</script>
[/jsg.example]
如果 Flash 和 JavaScript 正常運作的話,上面這一行標題字所顯示的字體會由預設字體 (Arial) 改為 Gothic。
HTML 的部份如下:
[code html]
<script type="text/javascript" src="sifr.js"></script>
<div id="sifr">Welcome to jsGears.com</div>
[/code]
還有一些 css 要設定,這幾個 style 可以讓原本的文字在替換後隱藏起來:
[code css]
.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;
}
[/code]
JavaScript 的部份如下:
[code js]
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"}));
};
[/code] 請問您有範例嗎??
感恩 :L 你看到的上面那一篇就是範例囉 您好.可是我將您的範例.同時COPY上去.我做了一個HTML連結您的CSS還有一個JAVA.可是都沒有SHOW出內嵌字型.是不是還缺少蛇麼ㄋ.感謝 這邊有更多範例可供參考:
[url]http://www.mikeindustries.com/blog/files/sifr/2.0/[/url]
或是提供你的網址來看看,可能是 JavaScript 沒有正確被執行。 請問您有信箱嗎??我方便把我做的檔案寄給您..能否幫我看是否有錯誤.感謝 幫你看過囉,你沒引用到正確的 sifr.js,我上面範例中的 JavaScript 是要放在 HTML 內的,並非 sifr.js 的內容。
[code html]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文件</title>
<script type="text/javascript" src="http://www.mikeindustries.com/blog/files/sifr/2.0/sifr.js"></script>
<link href="sIFR.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="sifr">Welcome to jsGears.com</div>
<script type="text/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"}));
};
</script>
</body>
</html>
[/code] 看不出來= ="
flash內嵌字型檔要怎麼做? Flash 內嵌字型的作法可參考這一篇的開頭:
[url]http://wiki.novemberborn.net/sifr/How+to+use[/url]
或是直接抓別人輸出好的 Flash 檔,像我上面用的範例也是官方做好的檔案。
頁:
[1]