web字體

字體格式

不同瀏覽器所支持的字體格式是不一樣的，我們有必要了解一下有關(guān)字體格式的知識。

1、TureType(.ttf)格式

.ttf字體是Windows和Mac的最常見的字體，是一種RAW格式，支持這種字體的瀏覽器有IE9+、Firefox3.5+、Chrome4+、Safari3+、Opera10+、iOS Mobile、Safari4.2+；

2、OpenType(.otf)格式

.otf字體被認為是一種原始的字體格式，其內(nèi)置在TureType的基礎(chǔ)上，支持這種字體的瀏覽器有Firefox3.5+、Chrome4.0+、Safari3.1+、Opera10.0+、iOS Mobile、Safari4.2+；

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

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

4、Embedded Open Type(.eot)格式

.eot字體是IE專用字體，可以從TrueType創(chuàng)建此格式字體，支持這種字體的瀏覽器有IE4+；

5、SVG(.svg)格式

.svg字體是基于SVG字體渲染的一種格式，支持這種字體的瀏覽器有Chrome4+、Safari3.1+、Opera10.0+、iOS Mobile Safari3.2+；

了解了上面的知識后，我們就需要為不同的瀏覽器準備不同格式的字體，通常我們會通過字體生成工具幫我們生成各種格式的字體，因此無需過于在意字體格式間的區(qū)別差異。

字體圖標

圖片是有諸多優(yōu)點的，但是缺點很明顯，比如圖片不但增加了總文件的大小，還增加了很多額外的"http請求"，這都會大大降低網(wǎng)頁的性能的。更重要的是圖片不能很好的進行“縮放”，因為圖片放大和縮小會失真。 我們后面會學(xué)習(xí)移動端響應(yīng)式，很多情況下希望我們的圖標是可以縮放的。此時，一個非常重要的技術(shù)出現(xiàn)了，額不是出現(xiàn)了，是以前就有，是被從新"寵幸"啦。。 這就是字體圖標（iconfont).

字體圖標優(yōu)點

可以做出跟圖片一樣可以做的事情,改變透明度、旋轉(zhuǎn)度，等…
但是本質(zhì)其實是文字，可以很隨意的改變顏色、產(chǎn)生陰影、透明效果等等…
本身體積更小，但攜帶的信息并沒有削減。
幾乎支持所有的瀏覽器
移動端設(shè)備必備良藥

字體圖標使用流程

總體來說，字體圖標按照如下流程：

設(shè)計字體圖標

假如圖標是我們公司單獨設(shè)計，那就需要第一步了，這個屬于UI設(shè)計人員的工作， 他們在 illustrator 或 Sketch 這類矢量圖形軟件里創(chuàng)建 icon圖標， 比如下圖：

之后保存為svg格式，然后給我們前端人員就好了。

其實第一步，我們不需要關(guān)心，只需要給我們這些圖標就可以了，如果圖標是大眾的，網(wǎng)上本來就有的，可以直接跳過第一步，進入第三步。

上傳生成字體包

當UI設(shè)計人員給我們svg文件的時候，我們需要轉(zhuǎn)換成我們頁面能使用的字體文件， 而且需要生成的是兼容性的適合各個瀏覽器的。

icomoon字庫
推薦網(wǎng)站： http://
IcoMoon成立于2011年，推出的第一個自定義圖標字體生成器，它允許用戶選擇他們所需要的圖標，使它們成一字型。 內(nèi)容種類繁多，非常全面，唯一的遺憾是國外服務(wù)器，打開網(wǎng)速較慢。

阿里icon font字庫
推薦網(wǎng)站： http://www./

這個是阿里媽媽M2UX的一個icon font字體圖標字庫，包含了淘寶圖標庫和阿里媽媽圖標庫?？梢允褂肁I制作圖標上傳生成。 一個字，免費，免費！！

fontello
http:///

在線定制你自己的icon font字體圖標字庫，也可以直接從GitHub下載整個圖標集，該項目也是開源的。

Font-Awesome

http://fortawesome./Font-Awesome/

這是我最喜歡的字庫之一了，更新比較快。目前已經(jīng)有369個圖標了。

Glyphicon Halflings

http:///

這個字體圖標可以在Bootstrap下免費使用。自帶了200多個圖標。

Icons8

https:///

提供PNG免費下載，像素大能到500PX

下載兼容字體包

剛才上傳完畢， 網(wǎng)站會給我們把UI做的svg圖片轉(zhuǎn)換為我們的字體格式， 然后下載下來就好了

當然，我們不需要自己專門的圖標，是想網(wǎng)上找?guī)讉€圖標使用，以上2步可以直接省略了， 直接到剛才的網(wǎng)站上找喜歡的下載使用吧。

字體引入到HTML

得到壓縮包之后，最后一步，是最重要的一步了， 就是字體文件已經(jīng)有了，我們需要引入到我們頁面中。

1. 首先把 以下4個文件放入到 fonts文件夾里面。 通俗的做法

   

   第一步：在樣式里面聲明字體： 告訴別人我們自己定義的字體

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

   第二步：給盒子使用字體

   span {
   font-family: "icomoon";
   }
   

   第三步：盒子里面添加結(jié)構(gòu)

   span::before {
    content: "\e900";
   }
   或者  
   <span>?</span>  
   

追加新圖標到原來庫里面

如果工作中，原來的字體圖標不夠用了，我們需要添加新的字體圖標，但是原來的不能刪除，繼續(xù)使用，此時我們需要這樣做

把壓縮包里面的selection.json 從新上傳，然后，選中自己想要新的圖標，從新下載壓縮包，替換原來文件即可。