在网站中使用自定义字体

import ImageFont, ImageDraw
from PIL import Image
class CustomFonts:
"""
 To generate the custom fonts using PIL
 """
def __init__(self, text, mode="RGBA", font="TIVERTON.TTF", encoding="armn", font_color="red", \
font_width=7, h_w=3.5):
"""
 encoding=armn is the result of test, other encodings don't work. a little magic.
 text: the content to generate
 font_width: width of the font
 h_w : the value of height/width
 """
self.mode = mode
self.font = font
self.font_size = (font_width, int(font_width*h_w))
self.encoding = encoding
self.font_color = font_color
self.text = text
self.image_size = (0, 0)
def adjust(self, w_adjust=0, h_adjust=0):
"""
 adjust the width and height
 """
self.image_size = (self.image_size[0] - w_adjust, self.image_size[1] - h_adjust)
def gen_proper_image_size(self, w_adjust=0, h_adjust=0):
"""
 get the output image's size based on the length of text
 """
size = self.font_size[0]
self.image_size = (len(self.text.replace(" ", "")) * size, self.font_size[1])
self.adjust(w_adjust, h_adjust)
def gen_images(self, output=""):
"""
 generate the images based on the text
 if output="", the name of the file will be the text with replacing blank with _
 """
if output == "":
output = self.text.replace(" ", "_")
if output.split(".")[-1].lower() not in ("jpg", "jpeg", "png", "gif"):
output += ".png"
image = Image.new(self.mode, self.image_size, (0, 0, 0, 0))
draw = ImageDraw.Draw(image)
font = ImageFont.truetype(self.font, self.font_size[1], encoding=self.encoding)
draw.text((0,0), self.text, font=font, fill=self.font_color)
image.save(output)
if __name__ == "__main__":
a = CustomFonts("this is for test output".lower())
a.gen_proper_image_size()
a.gen_images()

于是生成了类似于下面图片的文字:

http://farm3.static.flickr.com/2576/4119657680_c3d2d02a74_o.png

图片有点小,不过你能够看到,还是可用的.

但是, 在后面要生成数字的图片时出现了异常情况, 生成的图片总是半边, 查找了半天原因没有找到(现在想起还是挺庆幸没有找到,否则可能就不会有后来的方案了.).

总结下这种方案的优劣:

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

好处是, 可以比较灵活地订制.

使用js动态替换

当我无法找到那个数字问题的原因时,我开始尝试新的解决方案.

终于找到了篇博客, HOW TO USE CUSTOM FONTS ON THE WEBSITE , 于是终于发现了 CUFON.

我们来看看它的feature:

No plug-ins required – it can only use features natively supported by the client
Compatibility – it has to work on every major browser on the market
Ease of use – no or near-zero configuration needed for standard use cases
Speed – it has to be fast, even for sufficiently large amounts of text

我们来看看它生成的效果:

http://farm3.static.flickr.com/2730/4118905505_58bb76919a_o.png

我们来看看它是如何使用的:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="cufon-yui.js" type="text/javascript"></script>
<script src="Tiverton_400.font.js" type="text/javascript"></script>
<script type="text/javascript">
Cufon.replace('div');
</script>
</head>
<body>
<div style="font-wight:bold;font-size:45px;color:green;" >
For Test Only. 2009-11-20
<a href="http://www.cnblogs.com/mindsbook/">zhutao</a>
</div>
</body>
</html>

非常简单, 需要注意的是:

你需要根据字体文件来生成一个js文件,以便于CUFON查找
Cufon.replace('div'); 就是唯一的一句js用来动态地替换相应的文字
可以为你的内容指定额外的样式.

那么 CUFON 有什么优缺点呢?

对于生成好的字体对应的js文件,其并不依赖于客户端有相应的字体安装
由于js是客户端文件,所以除了首次加载外, 后面会有较好的性能和用户体验
生成的不是图片,所以能够指定额外的样式(具体看下文中的实现分析)
灵活

缺点有: 字体的大小并不严格准确(问题不大),如果用户禁用了js这种方案会失效.

实现分析

那么我们来逐一分析二种方案的实现方式.

转换为图片

我们使用的是 PIL , PIL 目前是支持truetype字体的. PIL 原理其实很简单, 就是使用像素来绘制相应的格式的图片(如例子中的png), 为每个像素添加相应的属性值, 如色度,灰度等.

使用js动态替换

详细地说明可以参考 How it works?

简单地说, 就是:

将字体文件(ttf)转换为svg font
svn font转换为 VML
而 VML 是浏览器所支持
CUFON 核心的js文件会屏蔽掉浏览器的差异,为不同的浏览器生成所支持的html

在Firefox下生成的html(上面例子中的日期)如下:

<cufon class="cufon cufon-canvas" alt="2009-11-20 " style="width: 169px; height: 45px;">
<canvas width="189" height="63" style="width: 189px; height: 63px; top: -15px; left: 1px;"/>
<cufontext>2009-11-20 </cufontext>
</cufon>