關於@font-face的一些問題

@font-face 可以加載服務器端的字體文件，讓客戶端顯示客戶端所沒有安裝的字體。【微軟的IE 5已是開始支持這個屬性，可是隻支持微軟自有的.eot (Embedded Open Type) 格式，而其餘瀏覽器直到如今都沒有支持這一字體格式。然而，從Safari 3.1開始，網頁重構工程師已經能夠設置.ttf(TrueType)和.otf(OpenType)兩種字體作爲自定義字體了。

@font-face的語法規則：

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

如：

@font-face{
    font-family:"playericons";
    src:url(../font/fontello.eot);
    src:url(../font/fontello.eot#iefix) format("embedded-opentype"),
    url(../font/fontello.woff) format("woff"),
    url(../font/fontello.ttf) format("truetype"),
    url(../font/fontello.svg) format("svg");
    font-weight:normal;
    font-style:normal;
}

參數說明：

取值說明

一、font-family:此值指的就是你自定義的字體名稱，最好是使用你下載的默認字體，他將被引用到你的Web元素中的font-family。如「font-family:"playericons";」

二、source:此值指的是你自定義的字體的存放路徑，能夠是相對路徑也能夠是絕路徑；

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

四、weight和style:這兩個值你們必定很熟悉，weight定義字體是否爲粗體，style主要定義字體樣式，如斜體。

瀏覽器對@font-face的兼容問題，這裏涉及到一個字體format的問題，由於不一樣的瀏覽器對字體格式支持是不一致的

1、TureTpe(.ttf)格式：

.ttf字體是Windows和Mac的最多見的字體，是一種RAW格式，所以他不爲網站優化,支持這種字體的瀏覽器有【IE9+,Firefox3.5+,Chrome4+,Safari3+,Opera10+,iOS Mobile Safari4.2+】；

2、OpenType(.otf)格式：

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

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

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

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

.eot字體是IE專用字體，能夠從TrueType建立此格式字體,支持這種字體的瀏覽器有【IE4+】；

5、SVG(.svg)格式：

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

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

 

爲了讓更多的瀏覽器支持，建議寫成如上的例子

裏面的參數和語法大概清楚，還有個問題，就是去哪裏獲取到eot,.woff,.ttf,.svg這些字體格式呢？

第一步：下載所須要的字體，http://www.dafont.com/這個網站還不錯。打開網頁一看，一目瞭然，選擇本身須要的字體，download下來；

下一步就是獲取各個瀏覽器所支持的格式了，特殊字體已經在你的電腦中了，如今咱們須要想辦法得到@font-face所需的.eot,.woff,.ttf,.svg字體格式。要獲取這些字體格式，咱們一樣是須要第三方工具或者軟件來實現http://www.fontsquirrel.com/tools/webfont-generator

上傳好，download 下來，會解壓會發現：

打開demo文件

咱們就能夠直接使用了。若有錯誤之處，還請你們糾正