sIFR、typeface.js和cufon文本替換技術

DIV+CSS佈局教程網 >> 網頁腳本 >> WEB網站前端 >> 關於網頁技巧 >> sIFR、typeface.js和cufon文本替換技術

編輯：關於網頁技巧

網頁制作poluoluo文章簡介：一個常常令設計師和前端開發人員都頭疼的事情就是字體的使用，設計師常常在設計稿中使用某些很漂亮的字體，以實現比較酷炫的界面。但這樣常常給編碼人員造成一些難度，如果在頁面中放棄使用這些字體，設計師會感到郁悶，而如果使用這些字體的話，就要切圖並使用很多額外

一個常常令設計師和前端開發人員都頭疼的事情就是字體的使用，設計師常常在設計稿中使用某些很漂亮的字體，以實現比較酷炫的界面。但這樣常常給編碼人員造成一些難度，如果在頁面中放棄使用這些字體，設計師會感到郁悶，而如果使用這些字體的話，就要切圖並使用很多額外的樣式——又一個魚和熊掌的抉擇。還好，現在已經有了一些相關的替代技術了。

1. @font-face

CSS3的@font-face屬性（事實上CSS2中就已引入），為我們帶來了一些希望，而Firefox 3.5新增的對@font-face的支持，讓我們離這個希望更進了一些。

到現在為止，已經有Safari、Chrome、Opera 10和Firefox 3.5支持@font-face了，比較意外的是，IE系列浏覽器也部分支持該屬性。Mozilla旗下的其它產品，SeaMonkey 2 和Thunderbird 3 也支持該屬性。

浏覽器兼容性

浏覽器最低版本支持字體 Internet Explorer 4.0 只支持OpenType字體(eof格式) Firefox (Gecko) 3.5 (1.9.1) TrueType(ttf格式)和OpenType 字體 Opera 10.0 TrueType和OpenType 字體 Safari (WebKit) 3.1 (525) TrueType和OpenType 字體

從表中可以看出，IE系浏覽器不支持TTF格式的字體，只支持eof格式，不過，微軟官方發布了一個WEFT工具，可以將TTF轉化為EOF，需要的朋友可以去下載使用。

可以使用的樣式如下：

@font-face {
	font-family: qianduanNet;
	font-style:  normal;
    font-weight: 400;
	src: url("SketchRockwell.ttf");
}
.fontFace{
	font-family: qianduanNet;
	font-size: 3.2em;
	letter-spacing: 1px;
	text-align: center;
}

IE中的樣式如下：

@font-face {
    font-family: Goudy Stout;
    font-style:  normal;
    font-weight: 400;
    src: url(GOUDYST0.eot);
}

這是目前最簡單實現嵌入字體的方法。

@font-face資源：

CSS3系列教程:嵌入字體/網絡字體
Mozilla開發者中心：@font-face
Web fonts with @font-face

sIFR

sIFR並非一種新技術，而是已經存在並被使用很多年了。sIFR是一種很有用也很好用的文本替換技術，通過Flash+JS+CSS將網絡字體嵌入到頁面中。

考慮到網上已經有很多資源，本文就不再贅述，想要了解的朋友可以參考一下文章：

如何以及何時使用sIFR
sIFR-文本替換技術
sIFR——百度百科

Typeface.js

Typeface被認為是替代SIFR的最佳方案，相對於sIFR，Typeface少了Flash的應用，使用純JS來嵌入相關字體，而且用法也很簡單：在頁面中引入相應的js文件就OK了。

<html>
  <head>
<!-- 加載所有的樣式先 -->
    <link rel="stylesheet" type="text/css" ref="/style.css">
<!-- 再加載typeface.js 庫文件和typeface.js字體文件-->
    <script type="text/javascript" src="typeface-0.10.js"></script>
    <script type="text/javascript" src="helvetiker_regular.typeface.js"></script>
  </head>
  <body>
<!-- 繼續並使用CSS指定typeface.js 字體 -->
    <div class="myclass typeface-js" style="font-family: Helvetiker">
      文本文本...
    </div>
  </body>
</html>

從中我們可以看出來，使用Typeface只需要著簡單的幾步就可以在頁面中使用嵌入字體了。

typeface資源：

下載的字體（該頁面可以包含一個字體生成器）
typeface查看演示

cufon

cufon是一個比較新的技術，被定位為有價值的sIFR替代方案，它有很多優勢：

無需浏覽器插件——被浏覽器原生支持；
兼容性——兼容各個主流浏覽器
易用—— 無需配置
速度—— 快速渲染大量字體

cufon的原理：

cufon通過生成器將字體文件轉化為SVG字體，再將其轉換為VML文件，這對IE很重要，因為IE原生支持VML文件。最後，使用復雜的JavaScript函數將VML文件編碼為JSON文件（typeface的原理與此類似）。如下圖所示：

這樣做有很多好處：

與加載一個字體文件，你只需要加載一些js文件就可以；
客戶端無需再次手工編碼；
外部js文件直到加載完成才會被執行，這可以讓我們實現無閃爍的干淨的替換。
壓縮率高。相對於字體文件，可壓縮掉60-80% 。

cufon的用法：

cufon的用法與typeface類似，需要加載一個庫文件和字體文件。而與typeface不同的是，你需要使用js初始化cufon：

<script type="text/javascript">
Cufón.replace('h2', { fontFamily: 'Qlassik Medium' }); 
</script>

這與typeface的在樣式中定義字體很不一樣。

cufon資源：

cufon項目
cufon演示
cufon生成器
wp-cufon 一個使用cufon的wordpress插件

cufon和typeface.js對比：

Cufón Typeface.js File size 14.0kb (壓縮後) 16.3kb (未壓縮) 支持的浏覽器 Firefox 1.5+, Safari 3+, Opera 9.5+, Google Chrome 和 Internet Explorer6+ Firefox 1.5+, Safari 2+, and Internet Explorer 6+, 最新版已經支持IE8 支持的字體類型 .ttf, .otf, PFB, postscript .ttf 支持的字體樣式 font-size, font-style, font-weight, line-height, text-shadow, color font-size, font-style, font-weight, font-stretch, letter-spacing, line-height 可選文字? 尚不支持尚不支持

從這個對比中可以看出來，兩者並沒有太大的不同，cufon支持更多的浏覽器和字體類型，而typeface支持更多的字體樣式。實際應用中貌似typeface方便一些，可以直接在樣式中定義字體，而cufon則有總體文件大小方面的優勢。具體用哪一個，看你自己的喜好吧。

總結

事實上，sIFR、typeface.js和cufon都是目前常說的文本替換技術，這些技術都可以用來替換@font-face，並且實現更好的浏覽器兼容性。但是每種技術都不是完美的：

@font-face最簡單，雖然大部分浏覽器也都支持了，但是其浏覽器兼容性並不是很完美，對IE還需要eof字體的特殊支持，而且對於中文字體來說，一般都很大，這會占用很大的頁面加載時間和服務器流量。
sIFR是兼容性和可用性最好、對SEO友好的一種方案，但也是實現起來最復雜的，而且需要浏覽器支持Flash插件。
typeface和cufon都是利用在IE中渲染VML，而在非IE浏覽器中使用canvas的方式實現“偽”字體的，他們使用起來相對簡單，但是可用性和用戶體驗以及SEO都不是很理想。
版權問題是一個很重要的問題，無論你使用哪種技術，都需要考慮文字的授權。

所以，使用哪種方案，要看你的需求和喜好，或許你寧願切更多的圖片也不願使用這些技術？