jsGears.com 技術論壇 - AJAX, JavaScript, jQuery, 網站開發, 前端效能優化's Archiver

wmh 發表於 2008-6-8 20:26

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]

gungogo 發表於 2009-8-27 01:00

請問您有範例嗎??
感恩

wmh 發表於 2009-8-27 08:12

:L 你看到的上面那一篇就是範例囉

gungogo 發表於 2009-8-27 09:35

您好.可是我將您的範例.同時COPY上去.我做了一個HTML連結您的CSS還有一個JAVA.可是都沒有SHOW出內嵌字型.是不是還缺少蛇麼ㄋ.感謝

wmh 發表於 2009-8-27 10:54

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

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

gungogo 發表於 2009-8-27 11:17

請問您有信箱嗎??我方便把我做的檔案寄給您..能否幫我看是否有錯誤.感謝

wmh 發表於 2009-8-27 13:02

幫你看過囉,你沒引用到正確的 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]

JS領事 發表於 2009-8-27 16:17

看不出來= ="

flash內嵌字型檔要怎麼做?

wmh 發表於 2009-8-27 17:22

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

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

頁: [1]

Powered by Discuz! Archiver  © 2001-2009 Comsenz Inc.