CSS3之嵌入Web字體

     以前若是想在本身的網站使用某些好看的字體，老是無可奈何得在PS裏先把字體圖片作好。雖然這樣作也能達到咱們想要的效果，可是這樣就增長了HTTP請求（若是在多處使用的話），即便合併全部圖片，也很差管理，靈活性不高，哪一天想換種更好看的字體，那工做量，想一想都沒勁！幸虧CSS3新增了@font-face模塊，能夠幫助咱們輕鬆解決Web頁面中使用優雅字體的方式，並且咱們能夠根據須要自定義多種字體，可是每一個@font-face只能定義一種，若須要多個字體就啓用多個@font-face規則。

     @font-face 主要就是把本身想要的，或者本身定義的Web字體嵌入到Web頁面中，而後這些字體就會被放置在服務器上，瀏覽器會根據指定的命令將對應的字體下載到本地緩存，使用它來修飾文本。也就是咱們所說的Web字體嵌入。想要更詳細的瞭解，能夠到W3C看看：http://www.w3school.com.cn/css3/css3_font.asp

看一下瀏覽器兼容：

Internet Explorer 9+, Firefox, Chrome, Safari, 和 Opera 支持 WOFF (Web Open Font Format) 字體 。

Firefox, Chrome, Safari, 和 Opera 支持 .ttf (True Type字體) 和 .otf (OpenType) 字體字體類型 。

Chrome, Safari 和 Opera 也支持 SVG 字體/摺疊。

Internet Explorer 一樣支持 EOT (Embedded OpenType) 字體。

注意： Internet Explorer 8 以及更早的版本不支持新的 @font-face 規則。

兼容全部瀏覽器的聲明方法:

@font-face{
    font-family: 'SingleMaltaRegular';               /*自定義字體名稱*/
    src: url('../fonts/singlemalta-webfont.eot');   /*IE9兼容模式*/
    src: url('../fonts/singlemalta-webfont.eot?#iefix') format('embedded-opentype'),  /*IE6~IE8*/
         url('../fonts/singlemalta-webfont.woff') format('woff'),         /*現代瀏覽器*/
         url('../fonts/singlemalta-webfont.ttf') format('truetype'),     /*Safari,Android,iOS*/
         url('../fonts/singlemalta-webfont.svg#SingleMaltaRegular') format('svg');   /*Legacy iOS*/
    font-weight: normal;
    font-style: normal;
}

PS：上面只是聲明瞭自定義字體的規則，想要使用還得調用它：

p{ font-family: "SingleMaltaRegular"; }

@font-face 語法：

font-family : 其屬性值指定的是自定義的字體名稱，最好就是直接使用下載字體的默認文件名，而後須要將它引用到元素的font-family中。雖然自定義了本身想要的字體，可是也得在元素中使用它纔有效果。【必選屬性】

src : 其屬性值指定自定義字體的存放路徑，能夠是相對路徑或者絕對路徑。format()指定的是自定義的字體格式，主要用來幫助瀏覽器識別，主要有：truetype，opentype，truetype-aat，svg，embedded-opentype等類型。【必選屬性】

font-weight 和 font-style ：分別用來指定字體是否加粗和定義字體樣式。固然還能夠設置font-size等字體屬性。【可選屬性】

 

字體的獲取：

在@font-face中，使用了四種字體格式EOT,WOFF,TTF,SVG 。因此咱們就須要解決獲取字體的問題！

咱們能夠在 Dafont.com 網站下載咱們想要的特殊字體，免費的：

Dafont.com : http://www.dafont.com/

可是呢，從Dafont.com下載的字體僅有TTF格式，因此，咱們還須要字體轉換工具，咱們可使用 Fontsquirrel在線轉換工具：http://www.fontsquirrel.com/tools/webfont-generator    只要將以前在Dafont.com下載的TTF格式的字體文件上傳到網站，而後選擇OPTIMAL，勾選複選框，而後Download就能夠拿到咱們想要的全部字體文件啦！

PS：Dafont.com網站裏面也有不少字體圖標可使用，這方面能夠本身去搜索，包括如何製做字體圖標等。