雖然我們可以通過圖片，flash、SIFR等技術(shù)來實現(xiàn)網(wǎng)頁使用特殊字體，有利于SEO網(wǎng)頁中嵌入特殊字體方法，@font-face屬性。

通常網(wǎng)頁上不能使用一些特殊字體，否則瀏覽者可能無法正確瀏覽到，雖然我們可以通過圖片，flash、SIFR等技術(shù)來實現(xiàn)網(wǎng)頁使用特殊字體，

但是這都有個嚴重的缺點：不利于SEO。

下面介紹一種非常有利于SEO的特殊字體應(yīng)用方法：在CSS中通過@font-face屬性來實現(xiàn)網(wǎng)頁中嵌入特殊字體。

第一步、

獲取要使用字體的三種文件格式，確保能在主流瀏覽器中都能正常顯示該字體。

.EOT，適用于Internet Explorer 4.0+
.TTF或.OTF，適用于Firefox 3.5、Safari、Opera
.SVG，適用于Chrome、IPhone

最常見的是.TTF文件，我們需要通過這種文件格式轉(zhuǎn)換為其余兩種文件格式?？梢酝ㄟ^網(wǎng)站http://onlinefontconverter.com/或者

http://www.fontsquirrel.com/fontface/generator?或onlinefontconverter提供的在線字體轉(zhuǎn)換服務(wù)獲取字體文件格式的轉(zhuǎn)換。這里推薦第

二個站點，它允許我們選擇需要的字符生成字體文件（在服務(wù)的最后一個選項），這樣就大大縮減了字體文件的大小，使得本方案更具實用性

。

第二步、

獲取到三種格式的字體文件后，在樣式表中聲明該字體，并在需要的地方使用該字體。

字體聲明如下：

@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">這是你的文字內(nèi)容-懶人建站</p>

?

說到瀏覽器對@font-face的兼容問題，這里涉及到一個字體format的問題，因為不同的瀏覽器對字體格式支持是不一致的，這樣大家有必要了解一下，各種版本的瀏覽器支持什么樣的字體，前面也簡單帶到了有關(guān)字體的幾種格式，下面我就分別說一下這個問題，讓大家心里有一個概念：

一、TureTpe(.ttf)格式：

.ttf字體是Windows和Mac的最常見的字體，是一種RAW格式，因此他不為網(wǎng)站優(yōu)化,支持這種字體的瀏覽器有【IE9+,Firefox3.5+,Chrome4+,Safari3+,Opera10+,iOS Mobile Safari4.2+】；

二、OpenType(.otf)格式：

.otf字體被認為是一種原始的字體格式，其內(nèi)置在TureType的基礎(chǔ)上，所以也提供了更多的功能,支持這種字體的瀏覽器有【Firefox3.5+,Chrome4.0+,Safari3.1+,Opera10.0+,iOS Mobile Safari4.2+】；

三、Web Open Font Format(.woff)格式：

.woff字體是Web字體中最佳格式，他是一個開放的TrueType/OpenType的壓縮版本，同時也支持元數(shù)據(jù)包的分離,支持這種字體的瀏覽器有【IE9+,Firefox3.5+,Chrome6+,Safari3.6+,Opera11.1+】；

四、Embedded Open Type(.eot)格式：

.eot字體是IE專用字體，可以從TrueType創(chuàng)建此格式字體,支持這種字體的瀏覽器有【IE4+】；

五、SVG(.svg)格式：

.svg字體是基于SVG字體渲染的一種格式,支持這種字體的瀏覽器有【Chrome4+,Safari3.1+,Opera10.0+,iOS Mobile Safari3.2+】。

這就意味著在@font-face中我們至少需要.woff,.eot兩種格式字體，甚至還需要.svg等字體達到更多種瀏覽版本的支持。

?

@font-face {font-family: 'MyWebFont';src: url('webfont.eot'); /* IE9 Compat Modes */src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */url('webfont.woff') format('woff'), /* Modern Browsers */url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */ }

網(wǎng)絡(luò)字體(Web font)的效率

你需要注意的是，字體文件的體積可能非常的大，而且需要額外的HTTP連接，這些都會降低網(wǎng)站頁面的加載速度。所以，在使用網(wǎng)絡(luò)字體@font-face前，你需要清楚它的利與弊，判斷網(wǎng)絡(luò)字體是否真的有必要用在你的網(wǎng)站頁面上。

如果你決定使用個性化自定義字體，可以采用一個非常靈活的方法，就是只加載盡量少的字體字符數(shù)和盡量少的字體風格(粗體/斜體)。例如，如果你使用谷歌字體，你可以只加載指定的字體風格組合：

@import url(http://fonts.googleapis.com/css?family=Averia+Sans+Libre:400,300italic,700);

總結(jié)

以上是生活随笔為你收集整理的网页中如何使用一些特殊字体的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。