在网站中使用自定义字体 使用 Cufon 渲染网页字体

字体 前端

参考地址：

1. 在网站中使用自定义字体
2. 使用 Cufon 渲染网页字体

解决方案

1.转换为图片
2.在用户加载页面时,为用户下载相应的字体文件到本地
3.其它

我们直接排除了方案2,因为这里面会存在安全的问题,而且并非所有的用户都会允许服务器给他下载特殊格式的文件.

转换为图片

总结下这种方案的优劣:
涉及到图片的动态生成和加载(比较大的IO和内存开销)
很难非常精确地生成图片(上面生成的例子并不完美,如果想要一个比较完美的结果,可能需要手动地调整参数不断观察)
颜色和样式(因为直接生成的是图片,所以样式很难更改, 更不用说动态地去改变颜色等)
用户体验(小图片作为菜单会出现不断加载的中间状态, 用户体验比较差)
位于服务器端, 服务器的压力会增大
好处是, 可以比较灵活地订制.

使用js动态替换 CUFON

那么 CUFON 有什么优缺点呢?
对于生成好的字体对应的js文件,其并不依赖于客户端有相应的字体安装
由于js是客户端文件,所以除了首次加载外, 后面会有较好的性能和用户体验
生成的不是图片,所以能够指定额外的样式(具体看下文中的实现分析)
灵活
缺点有: 字体的大小并不严格准确(问题不大),如果用户禁用了js这种方案会失效.

初涉 Cufon

引入 Cufon 核心库

<script src="cufon-yui.js" type="text/javascript"></script>

1.创建和引入字体文件

简言之 Cufon 字体文件，就是按照 Cufon 所提出的字体描述标准，创建形成的一种字体文件。
在线工具 http://cufon.shoqolate.com/generate/

2.引入 Cufon 字体文件

<script src="Baroque_Script_400.font.js" type="text/javascript"></script>

3.使用 Cufon.replace 方法对标记字体进行渲染

 <script> 
 Cufon.replace('p');    
 </script>

表 2. Cufon.replace 方法选择符参数值语法规范（部分）

深入了解 Cufon API

CSS 增强

表 3. Cufon 常用配置项和 CSS 风格名称对照表

而在 Cufon 中设定相关字体渲染配置项值的方法，则主要有以下两个。

1.通过 Cufon.set 方法设定相关配置项。Cufon.set 语法规范

Cufon.set("配置项名称", 配置项值 )

如果我们希望在显示时相关文字的颜色为红色，那么我们就可以在调用 Cufon.replace 方法之前，通过 Cufon.set 首先对 color 配置项进行设置。

2.在 Cufon.replace 方法中，直接设定相关的配置项值。

这也是非常简单的。如下代码所示是关于 Cufon.replace 方法的一个完整描述，从中读者可以看到，事实上在 Cufon.replace 方法内，配置项及其对应值可以通过一个 JSON 模式的 JavaScript 对象来提供，对此笔者就不再通过实例进行演示了。
而显然的在优先级上，由于其较 Cufon.set 方法更为接近所处理的标记实体，因此，在 Cufon.replace 方法中所指定的显示风格，将具有最高的处理优先级别，这也是毋庸置疑的。

 Cufon.replace("选择符", {"配置项 1" : 值 , "配置项 2": 值 , …… });

处理多种字体

使用不同的字体渲染标记
Cufon.replace("#id1", {fontFamily : "Baroque Script"});
Cufon.replace("#id2", {fontFamily : "Whiteboard Modern Demo"});

Cufon 实现原理初探及应用

Cufon 技术的实现策略其实就是以一定标准，在网页相关位置上“画”出了所需要显示的文字字符，并同时替换原先区域所需要显示的文字。

而这自然就牵涉到了一个非常重要的问题，即如何“直接”在网页上实现“作画”呢？总体来看目前业界比较成熟的方案，有以下 三种。
1.使用 Java Applet 进行绘画。
2.通过 ActionScript 语言在 Flash 内进行绘画。
3.借助于浏览器所推出的专有页面绘画方案，如 VML、Canvas 和 SVG 等，来进行页面的绘画。通常的，这些方案又都和浏览器 DOM 对象以及 JavaScript 语言紧密相关。

Cufon 使用的正是上述第三种解决方案。