对Cufon方案的改造

这个项目是解决前端工程师的一些问题而出现的，如果你对前端问题不感兴趣，请无视。
相信从事前端开发工作有一定的经验的同学，一定会遇到过网页字体的悲催需求，而解决网页字体显示也有很多的解决方案，包括embed face，图字，及接下来要介绍的cufon。

1.什么是cufon？

首先要感谢对cufon研究的前辈们的努力，我们有了中文版推广网站Cufon字体网,我就直接摘录上面的介绍：

　Cufon 是一个用来替代 sIFR 框架，作为一种基于 JavaScript 的网页字体引入方案， Cufon 的核心功能是通过一个名为“cufon-yui.js” 的 JavaScript 类库，提供给开发人员的。在web开发中，经常面对的一种“冲突”，即“字体（Font Family）冲突”。 　　通常的这一冲突总是爆发于 Web 页面的设计者（Designer）和开发者（Coder）之间。在很多场合下，Web 页面的设计者都会倾向于在他们的页面设计稿中，为文字附加使用一些“特殊”的字体和特效，以此来展示他们卓越的设计能力。比如设计一个公司的Logo，图片上的一些特殊字体是从ps字库中调出的，当然这些文字在图片上显示肯定是没有问题的，但是如果要在网页中用文本来显示这些效果，就是会让开发人员抓狂了，因为浏览器并不支持所有的字体，这种情况Cufon就会大显身手了。 Cufon 技术的实现策略其实就是以一定标准，在网页相关位置上“画”出了所需要显示的文字字符，并同时替换原先区域所需要显示的文字。 　　借助于浏览器所推出的专有页面绘画方案，如 VML、Canvas 和 SVG 等，来进行页面的绘画。 　　Cufon 字体文件，就是按照 Cufon 所提出的字体描述标准，创建形成的一种字体文件。

如果图字是在服务端输出文字的话，那cufon就是直接在浏览器上把字画出来，得益于现代浏览器的技术发展，现在cufon也是个全平台兼容的解决方案。

2.为什么会有cufon？

这个要从网页设计的悲催需求说起。随着HTML5等浏览器技术的不断发展，人们对网页的设计要求越来越高，加之有位叫Jobs的大神鼓动之下，大有网页设计越来越向印刷行业靠拢的趋势。人们越来越想在网页上看到像传统印刷品一样的阅读体现。这个时候我们看到越来越多的网站在字体使用上都越来越考究了。为了在网页上显示特别的字体，前端工程师们开始是使用图字（就是图片显示的文字），但这个方案非常的并不完美，SEO、修改文字时的那些重复工作，都使前端工程师觉得崩溃。所以前端工程师们开始想其他办法了，现在比较流行的embed font（就是直接把字体嵌入到网页中）跟cufon等等的方案出现了。对于前者（embed font）是个比较完美的解决方案，but只限于英文字体；对于中文字体，动辄上10M的字体文件，对于才100K+的网页来说，就是杀鸡用牛刀这回事。所以在处理中文字体基本上我们是使用不上这种方案的。然后cufon这种可以动态调整文字量的方案就比较“有希望”了。（事实上，也由于此方案的不完整，也是没有神马竞争力的，后面会说）

3.Cufon方案缺点

Cufon方案比较有竞争力的其中一个原因是，他的嵌入是可伸缩的，就是你可以选择需要嵌入的字符。所以对于embed font的方案，没有了那种杀鸡用牛刀的情况。but这个方案实现得实在太不完美了。首先这个项目提供的官网的生成器中，对上传文件实现了大小限制，你叫中文字体们庞大的体积情何以堪啊，老外们你是伤害广大中文前端工程师们的感情啊。所以有了文章开始的时候感谢的网站Cufon字体网。Cufon字体网虽然帮我们cache了大部分的中文字体的，使生成方便多了。但是这个生成还是没有实现自动化，对于字符的修改，前端工程师们还是要干一堆重复的工作，然后前端工程师们觉得被欺骗了--这跟图字方案有区别吗？可怜的前端工程师们又崩溃了。

4.对Cufon方案的改造

显然在这个Cufon方案中，缺乏的只是一个完整自动化的实现而已。我们只要把Cufon方案的使用上，做得更“人性化”就好了。首先我们需要自动匹配网页上需要replace的字符，然后根据字符生成js文件，然后自动将字符用cufon替换就好了。思路是这样，但为了实现那个自动跟据字符生成js文件，我们还是要跟Cufon字体网一样实现字体cache的重复造轮子工作。为了这，我还好好的研究了Cufon的源码……

5.Cufon的实现原理

其实这部分我的不想写的，因为你可以自己在Cufon的网站上找到（传送门入口），这个Cufon方案中，我们需要使用一个开源界赫赫有名的字体编辑软件FontForge(赫赫有名是我自己+上去的啦)，或者从事IOS开发的同学会使用过FontForge，是用来导出优化过（裁剪尺寸）的字体文件的。而Cufon项目，就专门为操作FontForge写了个php wrapper（这个真有点精彩，这个是对FontForge cli操作有一定了解才能写出来的东东），Cufon会使用这个wrapper操作FontForge，把字体文件导出成为SVG（就是矢量描述），然后把SVG转换成JSON格式，然后Cufon-yui.js就是根据这个JSON，把对应的字符画出来，替换掉网页中原来的文字。

6.这个项目干了什么？

总的来说，我就是用Cufon现有的操作FontForge的wrapper，实现了一个生成字体Cache接口，为每一个上传的字体文件生成全部支持的字符的缓存。然后再实现一个远程调用的js接口，使网页调用一个短短接口，就可以实现字体的自动替换。项目文件的index.php有说明具体的JS使用方法（可跨域，方便把整个项目部署成一个独立的应用，为其他有需要的站点服务）。

Javascript调用代码可能会是这个样子：

<script type="text/javascript" src="http://cufon.oschina.com/js/cufon-yui.js"></script>
<script type="text/javascript" src="http://cufon.oschina.com//cufon.js"></script>
<script type="text/javascript">
    (function(){
        window.cufonLoadback = function(){
            Cufon.replace('.cufon');
        }
        //for jQuery code
        var _text = $('.cufon').text().replace(' ', '');
        FontReplace.loadfont({
            'font' : 'Microsoft JhengHei',
            'customGlyphs' : _text,
            'callback' : 'cufonLoadback'
        });
    })();
</script>

项目文件

cufon_auto_replace.zip