CSS——web字體與CSS字體圖標

 

文章目錄

• web字體
• • 字體格式
• 字體圖標
• • 字體圖標優勢
  • 字體圖標使用流程
  • • 設計字體圖標
    • 上傳生成字體包
    • 下載兼容字體包
    • 字體引入到HTML
    • • • 第一步：在樣式裏面聲明字體： 告訴別人咱們本身定義的字體
        • 第二步：給盒子使用字體
        • 第三步：盒子裏面添加結構
  • 追加新圖標到原來庫裏面

 

web字體

字體格式

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

一、TureType(.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+；

五、SVG(.svg)格式

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

瞭解了上面的知識後，咱們就須要爲不一樣的瀏覽器準備不一樣格式的字體，一般咱們會經過字體生成工具幫咱們生成各類格式的字體，所以無需過於在乎字體格式間的區別差別。

字體圖標

圖片是有諸多優勢的，可是缺點很明顯，好比圖片不但增長了總文件的大小，還增長了不少額外的"http請求"，這都會大大下降網頁的性能的。更重要的是圖片不能很好的進行「縮放」，由於圖片放大和縮小會失真。 咱們後面會學習移動端響應式，不少狀況下但願咱們的圖標是能夠縮放的。此時，一個很是重要的技術出現了，額不是出現了，是之前就有，是被重新"寵幸"啦。。 這就是字體圖標（iconfont).

字體圖標優勢

能夠作出跟圖片同樣能夠作的事情,改變透明度、旋轉度，等…
可是本質實際上是文字，能夠很隨意的改變顏色、產生陰影、透明效果等等…
自己體積更小，但攜帶的信息並無削減。
幾乎支持全部的瀏覽器
移動端設備必備良藥

字體圖標使用流程

整體來講，字體圖標按照以下流程：

設計字體圖標

假如圖標是咱們公司單獨設計，那就須要第一步了，這個屬於UI設計人員的工做， 他們在 illustrator 或 Sketch 這類矢量圖形軟件裏建立 icon圖標， 好比下圖：

以後保存爲svg格式，而後給咱們前端人員就行了。

其實第一步，咱們不須要關心，只須要給咱們這些圖標就能夠了，若是圖標是大衆的，網上原本就有的，能夠直接跳過第一步，進入第三步。

上傳生成字體包

當UI設計人員給咱們svg文件的時候，咱們須要轉換成咱們頁面能使用的字體文件， 並且須要生成的是兼容性的適合各個瀏覽器的。

icomoon字庫
推薦網站： http://icomoon.io
IcoMoon成立於2011年，推出的第一個自定義圖標字體生成器，它容許用戶選擇他們所須要的圖標，使它們成一字型。 內容種類繁多，很是全面，惟一的遺憾是國外服務器，打開網速較慢。

阿里icon font字庫
推薦網站： http://www.iconfont.cn/

這個是阿里媽媽M2UX的一個icon font字體圖標字庫，包含了淘寶圖標庫和阿里媽媽圖標庫。可使用AI製做圖標上傳生成。 一個字，免費，免費！！

fontello
http://fontello.com/

在線定製你本身的icon font字體圖標字庫，也能夠直接從GitHub下載整個圖標集，該項目也是開源的。

Font-Awesome

http://fortawesome.github.io/Font-Awesome/

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

Glyphicon Halflings

http://glyphicons.com/

這個字體圖標能夠在Bootstrap下無償使用。自帶了200多個圖標。

Icons8

https://icons8.com/

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

下載兼容字體包

剛纔上傳完畢， 網站會給咱們把UI作的svg圖片轉換爲咱們的字體格式， 而後下載下來就行了

固然，咱們不須要本身專門的圖標，是想網上找幾個圖標使用，以上2步能夠直接省略了， 直接到剛纔的網站上找喜歡的下載使用吧。

字體引入到HTML

獲得壓縮包以後，最後一步，是最重要的一步了， 就是字體文件已經有了，咱們須要引入到咱們頁面中。

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";
   	}

   第三步：盒子裏面添加結構

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

追加新圖標到原來庫裏面

若是工做中，原來的字體圖標不夠用了，咱們須要添加新的字體圖標，可是原來的不能刪除，繼續使用，此時咱們須要這樣作

把壓縮包裏面的selection.json 重新上傳，而後，選中本身想要新的圖標，重新下載壓縮包，替換原來文件便可。