因为中文字符众多，导致字体文件庞大，最小的中文字体文件也需要几个M以上的容量，字库完整的动辄十几个M甚至几十个M，将这么大的文件挂到页面上显然不现实，下面将介绍几种方法来解决。
1.jpg
首先必须说明的是，既然是用到了字体就必须了解：你所需的文字越多，字体文件的体积就越大。如果字体文件已经超过1M，几乎就可以放弃了。
所以也就是说，制作的web个性化字体只能用在广告上、标语上。--那为什么不直接用成图片呢？字体文件相对比于图片，有以下几个优势。
- 适用性： 一个图标字体比一系列的图像（特别是在Retina屏中使用双倍大小的图像）要小。一旦图标字体加载了，你的图标就会马上渲染出来，不需要下载一个图像。
- 可扩展性： 图标字体可以用过font-size属性设置其任何大小。这使您能够随时输出不同大小的图标，然而，使用位图，你必须得为每个不同大小的图像输出一个不同文件。
- 灵活性： 文字效果可以很容易地应用到你的图标上，包括颜色，阴影和翻转等效果。他们还可以在任何背景下显示。
一. 收费云平台
- http://yun.foundertype.com/ 方正字体云服务，根据官方网站的介绍：
网页、APP因高质量字体而卓越，提供极致阅读体验。突破中文高质量字体需转化为图片的限制，兼顾体验与SEO，提升关键字搜索排名。方正字体云服务的官方平台方正是最大、最专业的中文字体提供商。
方正字体云服务大概提供有一百多种在线字体，但并没有提供公开报价。
- https://www.justfont.com/ justfont，来自台湾的线上中文字体服务，有明确的报价（新台币）。也有一百种字体左右提供选择，注意要找那些简繁字体均有的。
其实两家服务都差不多，justfont在报价上比较透明，但支付方面恐怕比较麻烦。
那么，有没有办法让字体运行在自己的服务器端，然后文件又比较小的方案呢？答案是有的。
二. 中文webfont的解决方案:字体子集化
中文三大家网络公司都有提供字体子集化的服务。所谓字体子集化就是简化字体，将不需要的字从字库剔除，提取仅需要的文字另存为新的字体文件，字体当然就小了。
腾讯：font-spider
百度：font-min
阿里巴巴：icon-font font-carrier
以上三家各有优劣，其中腾讯的font-spider的优化核心是用的百度的font-min，从使用方便、功能适用，推荐腾讯的font-spider。
font-spider官方介绍：字蛛是一个智能 WebFont 压缩工具，它能自动分析出页面使用的 WebFont 并进行按需压缩。
现在我们来演示一下如何使用font-spider，下面的例子用的是windows操作系统进行操作。
安装好了node.js之后，用win+R运行cmd，在命令提示符中输入以下代码，安装font-spider。
npm install font-spider -g
假设我在c:\web文件夹里面有3个文件，一个css文件，一个html文件，以及一个全字库的字体文件（放在font文件夹里面）。下面是CSS文件的代码：
/*使用选择器指定字体*/
@font-face {
font-family: '汉仪晴空体W';
src: url('font/HYQingKongTiJ.eot');
src: url('font/HYQingKongTiJ.eot?#font-spider') format('embedded-opentype'), url('font/HYQingKongTiJ.woff') format('woff'), url('font/HYQingKongTiJ.ttf') format('truetype'), url('font/HYQingKongTiJ.svg') format('svg');
font-weight: normal;
font-style: normal;
}
h1 {
font-family: '汉仪晴空体W';
}
这里是html代码
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="css.css">
</head>
<body>
<h1>新架构 全栈设计</h1>
</body>
</html>
在cmd窗口上输入：
C:\web>font-spider index.html
稍微运算一下，已经生成字体成功就如下图所示：
2.jpg
而原来字体文件已经存放在：.font-spider文件夹里面。
运行网页文件如下图所示：
3.jpg
这个方案的优点就是SEO完美，跟收费云字库并没有区别。
但其实在我的规划网站中，这个广告词是用“王漢宗特明繁體”字体的。遗憾的是，使用font-spider无论如何也输不出来。如果遇上兼容性问题，那么又该怎么处理呢？
三.图标字体一起打包成web字体
先上我的网站最终的效果图：
4.jpg
这个解决方案的灵感来自于Font Awesome图标文字。
通常项目都会加载图标字体文件，例如Font Awesome，使得网站的图标可以通过字体的形式来显示。可是用久了就会感觉浪费了，好多图标不是需要的，而我们网站需要的图标（如LOGO）却得去重新建个字体文件或者图片来完成。
这个方案的步骤比较繁琐：
- Illustrator 输出SVG
打开Adobe Illustrator，新建一个配置文件为web的文件，我一般设置宽度高度均为200px。如果LOGO图标请先转为AI格式，如果是文字，选择字体后要注意需要创建轮廓。设计好了以后导出为svg格式即可。(不一定需要用Illustrator，可以导出为svg文件的软件都可以)
5.jpg
- 导入到IcoMoon
IcoMoon是一款免费的WEB APP，通过使用不同的设置，让我们能够创建出自定义的ICON字体。
网站地址: http://icomoon.io/app/
IcoMoon本身也有海量的图标，当然也包括Font Awesome。我非常喜欢Font Awesome的原因是：中文社区LOGO也包括其中，如QQ、微信、微博等。
点击IcoMoon的左上角Import Icons，选择刚刚保存的svg格式文件导入。
点击左下角的Add Icons From Library... ，选择Font Awesome，将需要的图标单击一下。选择完成后，点击Generate Font，生成字体后点击Download。
6.jpg
- html 设置
下载的zip压缩包里面，有html,css以及字体所需的font文件，将font文件夹的所有文件拷贝到你项目的font文件夹里面，css文件重新改一个名称，例如：font.css。
加载css：
<link rel="stylesheet" href="css/font.css">
html引用：
<!--logo-->
<div class="logo"><a href="#"><span class="axicon-logo">
</span></a></div>
<!--巨幕广告-->
<h1>
<span class="axicon-xin"></span>
<span class="axicon-jia"></span>
<span class="axicon-gou"></span>
<span class="axicon-quan"></span>
<span class="axicon-zhan"></span>
<span class="axicon-she"></span>
<span class="axicon-ji"></span>
</h1>
span class要参考你刚刚下载的demo.html文件，一个图标对应一个或多个的class。
至此，已经顺利完成此方案的所有任务。
这种方案的优点是几乎能完成所有你需要的任何要求，缺点是操作繁琐，还有一个SEO的问题。
但是，配合CSS的话，SEO并不会是一个问题~~
网友评论