返回列表 發帖

sIFR - 使用 Flash 內嵌字型來顯示文字

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"}));
};
To infinity and beyond!

你看到的上面那一篇就是範例囉
To infinity and beyond!

TOP

這邊有更多範例可供參考:
http://www.mikeindustries.com/blog/files/sifr/2.0/

或是提供你的網址來看看,可能是 JavaScript 沒有正確被執行。
To infinity and beyond!

TOP

幫你看過囉,你沒引用到正確的 sifr.js,我上面範例中的 JavaScript 是要放在 HTML 內的,並非 sifr.js 的內容。
<!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>
To infinity and beyond!

TOP

Flash 內嵌字型的作法可參考這一篇的開頭:
http://wiki.novemberborn.net/sifr/How+to+use

或是直接抓別人輸出好的 Flash 檔,像我上面用的範例也是官方做好的檔案。
To infinity and beyond!

TOP

返回列表 回復 發帖