字體使用是網頁設計中不可或缺的一部分。經常地，我們希望在網頁中使用某一特定字體，但是該字體并非主流操作系統的內置字體，這樣用戶在瀏覽頁面的 時候就有可能看不到真實的設計。美工設計師最常做的辦法是把想要的文字做成圖片，
?
這樣做有幾個明顯缺陷：
1. 不可能大范圍的使用該字體；
2. 圖片內容相對使用文字不易修改；
3. 不利于網站SEO（主流搜索引擎不會將圖片alt內容作為判斷網頁內容相關性的有效因素）。
?
網絡上有一些使用sIFR技術、或 javascript/flash hack的方法，但實現起來或繁瑣，或有缺陷。下面要講的是如何只通過CSS的@font-face屬性來實現在網頁中嵌入任意字體。
?
【第一步】
獲取要使用字體的三種文件格式，確保能在主流瀏覽器中都能正常顯示該字體。
?
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，需要的朋友 可以去下載使用 。
?
可以使用的樣式如下：
- .TTF或.OTF，適用于Firefox 3.5、Safari、Opera
- .EOT，適用于Internet Explorer 4.0+
- .SVG，適用于Chrome、IPhone
下面要解決的是如何獲取到某種字體的這三種格式文件。一般地，我們在手頭上（或在設計資源站點已經找到）有該字體的某種格式文件，最常見的 是.TTF文件，我們需要通過這種文件格式轉換為其余兩種文件格式。
?
字體文件格式的轉換可以通過網站 FontsQuirrel 或 onlinefontconverter 提 供的在線字體轉換服務獲取。這里推薦第一個站點，它允許我們選擇需要的字符生成字體文件（在服務的最后一個選項），這樣就大大縮減了字體文件的大小，使得 本方案更具實用性。
?
【第二步】
獲取到三種格式的字體文件后，下一步要在樣式表中聲明該字體，并在需要的地方使用該字體。
字體聲明如下：
?
@font-face {
font-family: 'fontNameRegular';
src: url('fontName.eot');
src: local('fontName Regular'),
local('fontName'),
url('fontName.woff') format('woff'),
url('fontName.ttf') format('truetype'),
url('fontName.svg#fontName') format('svg');
}
/*其中fontName替換為你的字體名稱*/
?
?
在頁面中需要的地方使用該字體：
?
p { font: 13px fontNameRegular, Arial, sans-serif; }
h1{font-family: fontNameRegular}
?
或者
?
<p style="font-family: fontNameRegular">掬水月在手，落花香滿衣</p>
?
其他方法：
sIFR
sIFR并非一種新技術，而是已經存在并被使用很多年了。sIFR是一種很有用也很好用的文本替換技術，通過 Flash+JS+CSS將網絡字體嵌入到頁面中。
考慮到網上已經有很多資源，本文就不再贅述，想要了解的朋友可以參考一下文章：
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資源：
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和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都不是很理想。
- 版 權問題是一個很重要的問題，無論你使用哪種技術，都需要考慮文字的授權。
所以，使用哪種方案，要看你的需求和喜好，或許你寧愿 切更多的圖片也不愿使用這些技術？
?
?
?
更多文章、技術交流、商務合作、聯系博主
微信掃碼或搜索：z360901061
微信掃一掃加我為好友
QQ號聯系： 360901061
您的支持是博主寫作最大的動力，如果您喜歡我的文章，感覺我的文章對您有幫助，請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧，狠狠點擊下面給點支持吧，站長非常感激您！手機微信長按不能支付解決辦法：請將微信支付二維碼保存到相冊，切換到微信，然后點擊微信右上角掃一掃功能，選擇支付二維碼完成支付。
【本文對您有幫助就好】元
