css3--fontface詳解與優化

CSS3 @font-face 規則

css一般用font-family

咱們都知道，在網頁製做中，會常常用到不一樣的字體，經常使用的有 微軟雅黑、宋體、Aria 等等。在咱們寫css的樣式的時候，經過 font-family 能夠指定元素的字體名稱。

CSS3 @font-face自定義字體

若是是 特殊字體 ，由於咱們的電腦沒有安裝那個字體，因此在網頁中顯示不出來，因此咱們經過 @font-face 來引入特殊字體。

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

取值說明：

YourWebFontName：字體名稱，他將被引用到元素中的 font-family 上

source：字體的存放路徑，跟css引用圖片同樣；

format：字體的格式，主要用來幫助瀏覽器識別，其值主要有如下幾種類型：truetype , opentype , truetype-aat , embedded-opentype , svg 等；

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

注：字體文件格式

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

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

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

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

⚠️
字體文件的體積可能很是的大，並且須要額外的HTTP鏈接，這些都會下降網站頁面的加載速度。因此，在使用網絡字體@font-face前，你須要清楚它的利與弊，判斷網絡字體是否真的有必要用在你的網站頁面上。

http://font-spider.org/中文字體壓縮器