css3中@font-face模塊自定義字體

1、@font-face模塊介紹

　　@font-face是CSS3中的一個模塊，他主要是把本身定義的Web字體嵌入到你的網頁中，隨着@font-face模塊的出現，在Web的開發中使用字體再也不只能使用Web安全字體。

一、@font-face語法規則

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

二、@font-face參數說明

　　font-family參數：指定自定義的字體名稱，最好使用下載的默認字體。

　　source參數：指定自定義的字體存放路徑，能夠是 相對路徑 或 絕對路徑。

　　format參數：指定自定義的字體格式，主要用來幫助瀏覽器識別，取值主要有以下類型：truetype、opentype、truetype-aat、embedded-opentype、avg等。

　　weight參數：指定字體是否爲粗體。

　　style參數：指定字體樣式，如斜體等。

三、瀏覽器兼容

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

　　各類版本的瀏覽器支持什麼樣的字體格式大致介紹以下：

（1）TrueTpe(.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）WebOpenFontFormat(.woff)格式

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

（4）EmbeddedOpenType(.eot)格式

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

（5）SVG(.svg)格式

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

（6）瀏覽器版本兼容總結

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

2、使用Bulletproof語法達到更多瀏覽器支持

　　爲了使@font-face達到更多的瀏覽器支持，Paul Irish寫了一個獨特的@font-face語法叫Bulletproof @font-face:

@font-face {
    font-family: 'YourWebFontName';
    src: url('YourWebFontName.eot?') format('eot');/*IE*/
    src:url('YourWebFontName.woff') format('woff'), url('YourWebFontName.ttf') format('truetype');/*non-IE*/
}

　　爲了讓各多的瀏覽器支持，你也能夠寫成以下格式：

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

3、@font-face實踐

　　經過一個實例來掌握@font-face使用。

一、獲取特殊字體

　　以single Malta字體爲例，要獲得single Malta字體，不外乎兩種途徑：第一是到付費網站購買字體；第二是到免費網站Dowdload字體。

　　經常使用的免費字體下載網站：Google Web Fonts和Dafont.com 。這裏從Dafont.com網站下載Single Malta字體：Single Malta。

　　

　　點擊download下載獲得文件 single_malta.zip。解壓獲得SingleMalta.ttf文件。

二、獲取@font-face所需字體格式

　　特殊字體拿到後，還須要獲取@font-face所需的.eot，.woff，.ttf，.svg字體格式。

　　要獲取這些字體須要使用第三方工具或軟件實現，這裏使用工具fontsquirrel爲例：

（1）進入工具界面

　　點擊這裏進入以下界面：

　　

（2）上傳字體及配置

　　而後點擊upload FONTS上傳下載好的字體。並完成如圖所示配置：

　　

　　下載完成後，Font Squirrel下載下來的文件已經保存在你本地的電腦上了，接着只要對他進行解壓縮，你就能看到文件列表以下所示：

　　

三、將字體應用在項目中

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

/*到這裏爲止，咱們已經經過@font-face自定義好所需的SingleMalta字體，離最後效果只差一步了，就是把本身定義的字體應用到你的Web中的DOM元素上：*/

h2.singleMalta {
    font-family: 'SingleMaltaRegular'
}

 　　顯示效果：

　　

4、使用總結

　　一、若是項目是英文網站，並且項目中的Logo，Tags等應用到較多的這種特殊字體效果，建議不要使用圖片效果，而使用@font-face，但若是是中文網站，仍是使用圖片比較合適，由於加載英文字體和圖片沒有多大區別，可是加載中文字體會大不少，會比較影響項目的某些性能的優化；

　　二、致命的錯誤，你在@font-face中定義時，文件路徑沒有載對；

　　三、只定義了@font-face，但並無應用到你的項目中的DOM元素上；

　　以上幾點都是在平時製做中常出現的問題，幾個免費字體下載的網址：Webfonts,Typekit,Kernest,Google Web Fonts,Kernest,Dafont,Niec Web Type,你點這裏將有更多的免費字體。前面幾個連接能夠獲取一些優美的怪異的特殊字體，但下面這個工具做用更是無窮的大，能幫你生成@font-face所須要的各類字體，這工具就是Font Squirrel。