字體使用是網(wǎng)頁(yè)設(shè)計(jì)中不可或缺的一部分。經(jīng)常地，我們希望在網(wǎng)頁(yè)中使用某一特定字體，但是該字體并非主流操作系統(tǒng)的內(nèi)置字體，這樣用戶在瀏覽頁(yè)面的 時(shí)候就有可能看不到真實(shí)的設(shè)計(jì)。美工設(shè)計(jì)師最常做的辦法是把想要的文字做成圖片，
?
這樣做有幾個(gè)明顯缺陷：
1. 不可能大范圍的使用該字體；
2. 圖片內(nèi)容相對(duì)使用文字不易修改；
3. 不利于網(wǎng)站SEO（主流搜索引擎不會(huì)將圖片alt內(nèi)容作為判斷網(wǎng)頁(yè)內(nèi)容相關(guān)性的有效因素）。
?
網(wǎng)絡(luò)上有一些使用sIFR技術(shù)、或 javascript/flash hack的方法，但實(shí)現(xiàn)起來(lái)或繁瑣，或有缺陷。下面要講的是如何只通過(guò)CSS的@font-face屬性來(lái)實(shí)現(xiàn)在網(wǎng)頁(yè)中嵌入任意字體。
?
【第一步】
獲取要使用字體的三種文件格式，確保能在主流瀏覽器中都能正常顯示該字體。
?
1. @font-face
CSS3的@font-face屬性（事實(shí)上CSS2中就已引入），為我們帶來(lái)了一些希望，而 Firefox 3.5新增的對(duì)@font-face的支持，讓我們離這個(gè)希望更進(jìn)了一些。
?
到現(xiàn)在為止，已經(jīng)有Safari、 Chrome、Opera 10和Firefox 3.5支持@font-face了，比較意外的是，IE系列瀏覽器也部分支持該屬性。Mozilla旗下的其它產(chǎn)品，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格式，不過(guò)，微軟官方發(fā)布了一個(gè)WEFT工具，可以將TTF轉(zhuǎn)化為EOF，需要的朋友 可以去下載使用 。
?
可以使用的樣式如下：
- .TTF或.OTF，適用于Firefox 3.5、Safari、Opera
- .EOT，適用于Internet Explorer 4.0+
- .SVG，適用于Chrome、IPhone
下面要解決的是如何獲取到某種字體的這三種格式文件。一般地，我們?cè)谑诸^上（或在設(shè)計(jì)資源站點(diǎn)已經(jīng)找到）有該字體的某種格式文件，最常見的 是.TTF文件，我們需要通過(guò)這種文件格式轉(zhuǎn)換為其余兩種文件格式。
?
字體文件格式的轉(zhuǎn)換可以通過(guò)網(wǎng)站 FontsQuirrel 或 onlinefontconverter 提 供的在線字體轉(zhuǎn)換服務(wù)獲取。這里推薦第一個(gè)站點(diǎn)，它允許我們選擇需要的字符生成字體文件（在服務(wù)的最后一個(gè)選項(xiàng)），這樣就大大縮減了字體文件的大小，使得 本方案更具實(shí)用性。
?
【第二步】
獲取到三種格式的字體文件后，下一步要在樣式表中聲明該字體，并在需要的地方使用該字體。
字體聲明如下：
?
@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替換為你的字體名稱*/
?
?
在頁(yè)面中需要的地方使用該字體：
?
p { font: 13px fontNameRegular, Arial, sans-serif; }
h1{font-family: fontNameRegular}
?
或者
?
<p style="font-family: fontNameRegular">掬水月在手，落花香滿衣</p>
?
其他方法：
sIFR
sIFR并非一種新技術(shù)，而是已經(jīng)存在并被使用很多年了。sIFR是一種很有用也很好用的文本替換技術(shù)，通過(guò) Flash+JS+CSS將網(wǎng)絡(luò)字體嵌入到頁(yè)面中。
考慮到網(wǎng)上已經(jīng)有很多資源，本文就不再贅述，想要了解的朋友可以參考一下文章：
Typeface.js
Typeface 被認(rèn)為是替代 SIFR的最佳方案，相對(duì)于sIFR，Typeface少了Flash的應(yīng)用，使用純JS來(lái)嵌入相關(guān)字體，而且用法也很簡(jiǎn)單：在頁(yè)面中引入相應(yīng)的js文件 就OK了。
?
<html>
<head>
<!-- 加載所有的樣式先 -->
<link rel="stylesheet" type="text/css" ref="/style.css">
<!-- 再加載typeface.js 庫(kù)文件和typeface.js字體文件-->
<script type="text/javascript" src="typeface-0.10.js"></script>
<script type="text/javascript" src="helvetiker_regular.typeface.js"></script>
</head>
<body>
<!-- 繼續(xù)并使用CSS指定typeface.js 字體 -->
<div class="myclass typeface-js" style="font-family: Helvetiker">
文本文本...
</div>
</body>
</html>
?
?
從 中我們可以看出來(lái)，使用Typeface只需要著簡(jiǎn)單的幾步就可以在頁(yè)面中使用嵌入字體了。
typeface資源：
cufon
cufon是一個(gè)比較新的技術(shù)，被定位為有價(jià)值的sIFR替代方案，它有很多優(yōu) 勢(shì)：
- 無(wú)需瀏覽器插件——被瀏覽器原生支持；
- 兼容性——兼容各個(gè)主流瀏覽器
- 易用—— 無(wú)需配置
- 速度—— 快速渲染大量字體
cufon的原理：
cufon通過(guò)生成器將字體文件 轉(zhuǎn)化為SVG字體，再將其轉(zhuǎn)換為VML文件，這對(duì)IE很重要，因?yàn)镮E原生支持VML文件。最后，使用復(fù)雜的JavaScript函數(shù)將VML文件編碼為 JSON文件（typeface的原理與此類似）。如下圖所示：
?
?
這 樣做有很多好處：
- 與加載一個(gè)字體文件，你只需要加載一些js文件就可以；
- 客戶端無(wú)需再次手工編碼；
- 外 部js文件直到加載完成才會(huì)被執(zhí)行，這可以讓我們實(shí)現(xiàn)無(wú)閃爍的干凈的替換。
- 壓縮率高。相對(duì)于字體文件，可壓縮掉60-80% 。
cufon 的用法：
cufon的用法與typeface類似，需要加載一個(gè)庫(kù)文件和字體文件。而與typeface不同的是，你需要使用js初始化 cufon：
?
<script type="text/javascript">
Cufón.replace('h2', { fontFamily: 'Qlassik Medium' });
</script>
?
?
這 與typeface的在樣式中定義字體很不一樣。
cufon資源：
- cufon項(xiàng)目
- cufon演示
- cufon生成器
- wp-cufon 一個(gè)使用cufon的wordpress插件
cufon和typeface.js對(duì)比：
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+, 最新版已經(jīng)支持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 |
| 尚 不支持 | 尚不支持 |
?
從這個(gè)對(duì)比中可以看出來(lái)，兩者并沒有太大的不 同，cufon支持更多的瀏覽器和字體類型，而typeface支持更多的字體樣式。實(shí)際應(yīng)用中貌似typeface方便一些，可以直接在樣式中定義字 體，而cufon則有總體文件大小方面的優(yōu)勢(shì)。具體用哪一個(gè)，看你自己的喜好吧。
總結(jié)
事實(shí)上，sIFR、 typeface.js和cufon都是目前常說(shuō)的文本替換技術(shù)，這些技術(shù)都可以用來(lái)替換@font-face，并且實(shí)現(xiàn)更好的瀏覽器兼容性。但是每種技 術(shù)都不是完美的：
- @font-face最簡(jiǎn)單，雖然大部分瀏覽器也都支持了，但是其瀏覽器兼容性并不是很完美，對(duì)IE還需要 eof字體的特殊支持，而且對(duì)于中文字體來(lái)說(shuō)，一般都很大，這會(huì)占用很大的頁(yè)面加載時(shí)間和服務(wù)器流量。
- sIFR是兼容性和可用性最好、 對(duì)SEO友好的一種方案，但也是實(shí)現(xiàn)起來(lái)最復(fù)雜的，而且需要瀏覽器支持Flash插件。
- typeface和cufon都是利用在IE中 渲染VML，而在非IE瀏覽器中使用canvas的方式實(shí)現(xiàn)“偽”字體的，他們使用起來(lái)相對(duì)簡(jiǎn)單，但是可用性和用戶體驗(yàn)以及SEO都不是很理想。
- 版 權(quán)問題是一個(gè)很重要的問題，無(wú)論你使用哪種技術(shù)，都需要考慮文字的授權(quán)。
所以，使用哪種方案，要看你的需求和喜好，或許你寧愿 切更多的圖片也不愿使用這些技術(shù)？
?
?
?
更多文章、技術(shù)交流、商務(wù)合作、聯(lián)系博主
微信掃碼或搜索：z360901061
微信掃一掃加我為好友
QQ號(hào)聯(lián)系： 360901061
您的支持是博主寫作最大的動(dòng)力，如果您喜歡我的文章，感覺我的文章對(duì)您有幫助，請(qǐng)用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧，狠狠點(diǎn)擊下面給點(diǎn)支持吧，站長(zhǎng)非常感激您！手機(jī)微信長(zhǎng)按不能支付解決辦法：請(qǐng)將微信支付二維碼保存到相冊(cè)，切換到微信，然后點(diǎn)擊微信右上角掃一掃功能，選擇支付二維碼完成支付。
【本文對(duì)您有幫助就好】元
