Web端圖標字體的探索

時間 2019-11-07

標籤 web 圖標字體探索欄目 HTML 简体版

原文原文鏈接

前言：圖標字體指的就是如font-awesome, semantic-ui icon這樣的，一般使用方式是引入圖標字體庫文件（css文件及.eot/.svg/.ttf/.woff/.woff2格式字體文件），而後經過類名便可使用圖標，根據圖標字體庫的規則，可修改其字體大小、顏色。前段時間藉着微信小程序裏圖標字體的使用，對圖標字體的使用及其原理有了進一步的瞭解，補充記錄一下。php

圖標字體庫使用解析：font-awesome爲例

通常使用方法：將css文件及包含幾種字體格式文件的fonts文件夾放入項目，而後引用該css文件，便可使用，如：css

<i class="fa fa-home"></i>

fa, fa-home類名是如何實現顯示圖標的？查看css文件，主要代碼是：html

/* FONT PATH
 * -------------------------- */
@font-face {
  font-family: 'FontAwesome';
  src: url('../fonts/fontawesome-webfont.eot?v=4.7.0');
  src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'), url('../fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}
.fa {
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.fa-home:before {
  content: "\f015";
}

`@font-face`指明字體格式文件來源及命名：

font-family: 'FontAwesome';
src: url('path/to/fonts/~.eot');
src: url('path/to/fonts/~.eot') format('embedded-opentype'), url('path/to/fonts/~.woff2') format('woff2'), url('path/to/fonts/~.woff') format('woff'), url('path/to/fonts/~.ttf') format('truetype'), url('path/to/fonts/~.svg') format('svg');

指明使用此圖標文件：

.fa {
    font: FontAwesome;
}

使用具體圖標，如fa-home:

.fa-home:before {
  content: "\f015";
}

至此，對於圖標字體實現的過程已有了大體瞭解，同時能夠發現，若是隻須要使用幾個圖標，而引入整個font-awesome圖標庫，明顯有不少圖標是冗餘的，若是能夠只定制須要的那幾個圖標，物盡其用，比較合適一些。
最簡單的方式，不引入整個css文件，而只包含以上@font-face, .fa以及須要的圖標的代碼便可，然而進一步想，爲什麼"f015"對應着home這個圖標？答案便指向字體文件，字體文件裏包含了這個描述，使得"f015"對應home圖標，那麼，能夠知道，字體文件裏必包含了你的項目裏可能沒有用到的其餘圖標。web

iconfont圖標定製

iconfont的使用則解決了上面所說的冗餘圖標的問題，即定製須要的圖標，設計師還可畫本身設計的圖標。chrome

iconfont官網對於其圖標的使用做了說明，Web端除了上面所說font-class的引用方式，還可經過unicode，symbol兩種方式，詳細可閱讀官網說明：iconfont代碼應用說明小程序

使用iconfont定製圖標字體生成的代碼，如(font-class引用方式)：segmentfault

@font-face {font-family: "iconfont";
  src: url('iconfont.eot?t=1501490511935'); /* IE9*/
  src: url('iconfont.eot?t=1501490511935#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('iconfont.woff?t=1501490511935') format('woff'), /* chrome, firefox */
  url('iconfont.ttf?t=1501490511935') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
  url('iconfont.svg?t=1501490511935#iconfont') format('svg'); /* iOS 4.1- */
}

.iconfont {
  font-family:"iconfont" !important;
  font-size:16px;
  font-style:normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-sort:before { content: "\e60c"; }

.icon-top:before { content: "\e671"; }

.icon-remove:before { content: "\e62b"; }

[ 注：其字體文件與此css文件在同一目錄 ]微信小程序

小程序圖標字體應用

小程序裏使用圖標字體，以上方式不能生效，因其不支持這些圖標字體格式，須要將字體文件轉化爲base64格式，轉化方式：經過第三方在線工具transfonter微信

更新：後來發現不須要用轉換工具，iconfont導出的格式中，自己就包含了base64格式，使用該文件便可app

轉化後字體文件內容大體爲：

@font-face {
  font-family: 'iconfont';
  src: url('iconfont.eot');
  font-weight: 500;
  font-style: normal;
}
@font-face {
  font-family: 'iconfont';
  src: url(data:application/font-woff2;charset=utf-8;base64,d09GMg...) format('woff2'),
    url(data:application/font-woff;charset=utf-8;base64,d09GRg...) format('woff'), 
    url('iconfont.ttf') format('truetype'),
    url('iconfont.svg#iconfont') format('svg');
  font-weight: 500;
  font-style: normal;
}

[ 注：以上base64部分省略了代碼，其具體長度跟圖標多少有關 ]

以上代碼，加上指明使用的圖標來源和具體的圖標代碼，就能夠在小程序裏愉快地使用圖標字體了，如：

.iconfont {
  font-family:"iconfont" !important;
  font-size:16px;
  font-style:normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-sort:before { content: "\e60c"; }

.icon-top:before { content: "\e671"; }

.icon-remove:before { content: "\e62b"; }