在网站中引入特殊字体

我的天~~这设计稿真好看！又有给自己加戏写效果的冲动咯。。。

这都是些什么字体？？说好的微软雅黑法大宋体呢。。又是一场切图的恶战。。。这小图标这么多，切个雪碧图还要做分辨率、兼容性适应。。不划算啊。。

所以这种时候就是特殊字体文件出场的时候了，特殊字体、字体图标解决问题。

在网站中引入字体文件，考虑到兼容性，需要引入四中字体文件。分别是.eot,.woff,.ttf,.svg后缀的文件。

字体文件大小由文件里包含的字段决定，因此英文特殊字体整体偏小，而中文特殊字体动不动就十来M。网页为了特殊字体而引入四十来兆的字体文件实在不理智。

折中处理方法是：对于网站静态展示的可控的字用特殊字体，其他用微软雅黑和宋体。

一、中文字体文件的压缩方法：

fontspider 官网链接：http://font-spider.org/

原理：选择性摘取字体文件中需要的文字，根据需要生成四种字体文件。

操作方法：

1、本地安装node.js

32 位安装包下载地址 : https://nodejs.org/dist/v4.4.3/node-v4.4.3-x86.msi

64 位安装包下载地址 : https://nodejs.org/dist/v4.4.3/node-v4.4.3-x64.msi

安装流程参考： http://www.runoob.com/nodejs/nodejs-install-setup.html

2、安装fontspider

输入：npm install font-spider -g

反馈如下。

3、特殊字体文件的生成

创建一个项目，在html里放入所有需要的字段，设置他们的font-family。放入一个已经下好的特殊字体（只需一种即可，算源文件）。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<link href="css/style.css" rel="stylesheet" /> 
	</head>
	<body>
		<p>猴赛雷</p>
	</body>
</html>

　font-face的src属性需要链四组对象，虽然现在只存在一个字体物理文件，在字蛛上执行后会根据此时的引用，生成需要的文件。

@font-face{
     font-family: 'testfont'; 
       src: url('../font/testfont.eot');
  src:
    url('../font/testfont.eot?#font-spider') format('embedded-opentype'),
    url('../font/testfont.woff') format('woff'),
    url('../font/testfont.ttf') format('truetype'),
    url('../font/testfont.svg') format('svg');
    font-weight:normal;
    font-style:normal;
}
body{font-family: "testfont";}

在node.js上运行font-sider命令

font-spider ./路径/文件名.html

例：font-spider D:/1前端学习代码/fontspider

运行结束后即可在项目里找到生成的压缩版字体物理文件。

至此，网页部分文字即可使用特殊字体

二、在网站中使用字体图标

推荐字体图标库：阿里巴巴矢量图标库 http://www.iconfont.cn/

将需要的字体图标加入到项目中后，可以生成需要的所有在线的字体文件。。超级方便有没有！

字体图标的使用：

css引入同理：

@font-face {
  font-family: 'iconfont';  /* project id 248016 */
  src: url('//at.alicdn.com/t/font_ts727czvnig22o6r.eot');
  src: url('//at.alicdn.com/t/font_ts727czvnig22o6r.eot?#iefix') format('embedded-opentype'),
  url('//at.alicdn.com/t/font_ts727czvnig22o6r.woff') format('woff'),
  url('//at.alicdn.com/t/font_ts727czvnig22o6r.ttf') format('truetype'),
  url('//at.alicdn.com/t/font_ts727czvnig22o6r.svg#iconfont') format('svg');
}
.iconfont{font-family: "iconfont";-webkit-font-smoothing: antialiased;-moz-osx-font-smooth: grayscale;}

1、可以在标签中使用：

<i class="iconfont"></i> 值为生成的图标编码

2、可以在伪类元素的content内容中写入，去掉&#x，加入转义符\,例如“e617”即可。

存在跨域问题的解决方法：

待更。