图标字体库在网页上的应用很广泛，甚至随便进入任何一个网站，都能看到“Font Awesome，阿里图标，草莓图标……”的身影。

这些图标在一定程度上，让我们的网站变得非常好看跟有特色，但不知道喜欢折腾网站主题的你是否知道‘字体子集化’这个词？

众所周知，中文字体的fonts文件一般都很大，有时我们想要使用所喜爱的中文字体，到最后却偏偏只能忍痛割爱，就因为本地加载它们可能会拖垮网站的响应速度……

可实在忍不住想用，又该怎么办呢？

没关系，虽然我们无法所有的中文字体都使用特定的字体，但我们可以给自己站点名称、logo（文字logo）、博主昵称等文字，来一份个性化的DIY。而这个时候就需要用到字体子集化了。

那么什么是字体子集化呢？

这里以INLOJV博主的付费主题YUAO为例，他主题首页头像旁边的博客名称跟副标题就是采用了字体子集化，只需事先将‘INLOJV，善败者不乱’这几个字做成单独的类似.eot文件，便可与众不同！

具体DEMO效果，请直接进入INLOJV的博客：
INLOJV

 

接下来是教程，方法其实很简单。

一、字体准备

从求字体或找字体这类的网站，给自己使用的电脑安装喜爱的字体；

二、Fontmin

下载Fontmin软件（当然不想下载客户端，也可以查看‘使用教程’，敲代码手工写）。

Fontmin 使用教程

Fontmin是第一个纯 JavaScript 字体子集化方案，可以生成WEB字体，自定义选择部分的文字，从而最小化打包。

个人建议直接用客户端来得简单省事：操作很傻瓜直白，只需要花费打字跟选择字体的一两分钟，就能轻轻松松自动生成web字体

三、将以下CSS样式写进style.css文件：

生成所需的web字体文件包以后，马上扔进主题根目录，然后顺手给字体写个样式，便于前端引用。

@font-face {
	font-family:"lyt_logo";//lyt_logo指的是字体名称，请随意名称，但要跟引用时一致
	src:url("images/lyt_logo.eot");//字体子集化文件路径，请自行书写正确的路径
	src:url("images/lyt_logo.eot?#iefix") format("embedded-opentype"),url("images/lyt_logo.woff") format("woff"),url("images/lyt_logo.ttf") format("truetype"),url("images/lyt_logo.svg#des") format("svg");//字体子集化文件路径，请自行书写正确的路径
	font-style:normal;
	font-weight:700
}

四、前端引用

在需要使用Web字体的地方，引用该字体样式，如：

.web-logo {font-family: lyt_logo,Microsoft Yahei,Arial;}

请将.web-logo改为自己所需的。

END.