網頁嵌入自訂字型方法

標籤：rom   是你   如何   取值   特定   pre   span   open   瀏覽器   

@font-face是CSS3中的一個模組，他主要是把自己定義的Web字型內嵌到你的網頁中。經常地，我們希望在網頁中使用某一特定字型，但是該字型並非主流作業系統的內建字型，這樣使用者在瀏覽頁面的時候就有可能看不到真實的設計。美工設計師最常做的辦法是把想要的文字做成圖片，這樣做有幾個明顯缺陷：1. 不可能大範圍的使用該字型；2. 圖片內容相對使用文字不易修改；3. 不利於網站SEO（主流搜尋引擎不會將圖片alt內容作為判斷網頁內容相關性的有效因素）。網路上有一些使用sIFR技術、或javascript/flash hack的方法，但實現起來或繁瑣，或有缺陷。下面要講的是如何只通過CSS的@font-face屬性來實現在網頁中嵌入任意字型。

 

先看下@font-face的文法規則：

@font-face {      font-family: <YourWebFontName>;      src: <source> [<format>][,<source> [<format>]]*;      [font-weight: <weight>];      [font-style: <style>];    }

取值說明

1、YourWebFontName:此值指的就是你自訂的字型名稱，最好是使用你下載的預設字型，他將被引用到你的Web元素中的font-family。如“font-family:"YourWebFontName";”

2、source:此值指的是你自訂的字型的存放路徑，可以是相對路徑也可以是絕路徑；

3、format：此值指的是你自訂的字型的格式，主要用來協助瀏覽器識別，其值主要有以下幾種類型：truetype,opentype,truetype-aat,embedded-opentype,avg等；

4、weight和style:這兩個值大家一定很熟悉，weight定義字型是否為粗體，style主要定義字型樣式，如斜體。

 

實現步驟：

第一步

擷取要使用字型的三種檔案格式，確保能在主流瀏覽器中都能正常顯示該字型。

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

下面要解決的是如何擷取到某種字型的這三種格式檔案。一般地，我們在手頭上（或在設計資來源站點點已經找到）有該字型的某種格式檔案，最常見的是.TTF檔案，我們需要通過這種檔案格式轉換為其餘兩種檔案格式。字型檔格式的轉換可以通過網站FontsQuirrel或onlinefontconverter提供的線上字型轉換服務擷取。這裡推薦第一個網站。

關於 擷取特殊字型：

推薦2個網站：Google Web Fonts和Dafont.com。當然你也可以選擇其他的。

 

關於 字型轉換，點擊這裡，主要設定的參數如下：

 

 

第二步

擷取到三種格式的字型檔後，下一步要在樣式表中聲明該字型，並在需要的地方使用該字型。

字型聲明如下：

 @font-face {      font-family: ‘pingfang‘;      src: url(‘../fonts/pingfang-webfont.eot‘);      src: url(‘../fonts/pingfang-webfont.eot?#iefix‘) format(‘embedded-opentype‘),           url(‘../fonts/pingfang-webfont.woff‘) format(‘woff‘),       url(‘../fonts/pingfang-webfont.ttf‘) format(‘truetype‘),       url(‘../fonts/pingfang-webfont.svg#pingfang‘) format(‘svg‘);      font-weight: normal;      font-style: normal;   }

到這裡為止，我們已經通過@font-face自訂好所需的pingfang字型，離最後效果只差一步了，就是把自己定義的字型應用到你的Web中的DOM元素上：

p { font: 13px pingfang, Arial, sans-serif; }h1{font-family: pingfang}

 

更詳細的文章推薦：CSS3 @font-face

網頁嵌入自訂字型方法