首先，处理字体，在网页：https://www.fontsquirrel.com/tools/webfont-generator

目前，@ font-face的支持

• Firefox
• Opera
• Chrome
• Safari
• Internet Explorer 9

在旧的浏览器使用@ font-face时，不同的浏览器支持特定的字体文件。

• IE浏览器：EOT
• Mozilla浏览器：OTF，TTF
• Safari浏览器：OTF，TTF​​，SVG
• 歌剧：OTF，TTF​​，SVG
• Chrome浏览器：TTF，SVG

将其分别转成.eot  .woff  .ttf  .svg  ,然后利用@font-face

@font-face {
     font-family:'fangZheng';    src:url('../fontface/fangZheng/_gbk_m-webfont.eot');    src:url('../fontface/fangZheng/_gbk_m-webfont.eot') format('embedded-opentype'), /* IE6-IE8 */url('//at.alicdn.com/t/font_1474877045_270467.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */url('../fontface/fangZheng/_gbk_m-webfont.woff') format('woff') /* chrome、firefox */,url('../fontface/fangZheng/_gbk_m-webfont.svg') format('svg'); } //使用的时候

.banner-text>p{font-family:'fangZheng';}

3，在页面中载入Web font系列的字体子集

下载：https://github.com/ecomfe/fontmin-app/releases 注意：字体支持：，，，所以不是太普遍的适用。

4，中文字体的自动化构建；

     基于  和 ，按需提取字型，多格式转换，自动化构建字体。

参考配置：http://efe.baidu.com/blog/chinese-font-build/

$ npm install -g edp

然后：

$ git clone https://github.com/junmer/edp-build-fontmin-demo    // 下载 示例项目$ cd edp-build-fontmin-demo                                     // 进入 示例项目 路径$ npm install edp-build-fontmin                                 // 安装 edp-build-fontmin 依赖$ edp build -f

 

5，gulp构建

参考配置：https://github.com/ecomfe/gulp-fontmin

$ npm install --save-dev gulp-fontmin

6.font-spider

Install

npm install font-spider -g

应用css：

@font-face {
     font-family: 'source';  src: url('../font/source.eot');  src:    url('../font/source.eot?#font-spider') format('embedded-opentype'),    url('../font/source.woff2') format('woff2'),    url('../font/source.woff') format('woff'),    url('../font/source.ttf') format('truetype'),    url('../font/source.svg') format('svg');  font-weight: normal;  font-style: normal;}.home h1, .demo > .test {
       font-family: 'source';}

下载：

https://github.com/aui/font-spider

拓展： -使用这样的服务，选择一个可备用的字体，以免字体未加载完或加载失败，而出现的空白。 -Font Face Observer, 压缩后大小4KB，这块也不熟https://github.com/bramstein/fontfaceobserver

-字体加载器——，这块还不熟。https://github.com/bramstein/fontloader

参考：http://www.w3cplus.com/css3/the-font-face-dilemma.html