使用Cufon技术实现Web自定义字体

sdouara 2011-07-06

在网页设计中,设计师会在设计中加入一些特殊效果的字体以使得页面更加美观,然而访问者的系统一般都是没有安装这些特殊字体的,所以使用font-family属性来定义这些特殊字体是行不通的,于是人们想出了很多解决方案,今天要介绍的是其中之一的Cufon方案。

定义及基本原理

什么是Cufon呢?简单的说,Cufon是一个用来替代sIFR(更早期的一种自定义字体实现方案)框架,实现在网页中对文字字体进行渲染功能的纯JavaScript开源类库。其基本原理是借助于浏览器所推出的专有页面绘画方案,如VML、Canvas和SVG等,在网页相关位置上“画”出了所需要显示的文字字符,并同时替换原先区域所需要显示的文字。如果读者所使用的浏览器恰好是Firefox的话,右键单击经Cufon渲染的文字,就可以发现这些文字可以按照图片模式进行查看和存储。

简单范例

步骤一:引入Cufon核心库

作为一种基于JavaScript的网页字体引入方案,Cufon的核心功能是通过一个名为“cufon-yui.js”的JavaScript类库,提供给开发人员的。因此使用Cufon技术的第一步,当然就是在Web页面中引入这一类库。首先到Cufon网站下载类库文件(最新版本是1.09i

代码中引入Cufon库,如下所示:

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

步骤二:创建和引入字体文件

这里说的字体文件是Cufon字体文件,这是使用Cufon技术的另一个关键所在。什么是Cufon字体文件呢?简言之Cufon字体文件,就是按照Cufon所提出的字体描述标准,创建形成的一种字体文件。而和其他字体创建标准如TrueType、OpenType等不同的是,按照Cufon标准所形成的这一文件本身,就是一个标准的JavaScript脚本文件,并交由Cufon类库进行解析和处理。

Cufon为开发人员准备了相应的在线工具,来实现这一转换过程。而目前工具所可以转换的字体标准则包括了TrueType、FreeType2、OpenType、PostScriptFont等多种,应该说这几乎囊括了当前主流的一些字体创建标准。工具的使用其实并不复杂,笔者就不赘述了。

以DenneShuffle字体为例(更多创意字体可见20款非常有趣的高质量免费字体),在使用这一工具产生了相应的Cufon标准的字体文件“Denne_Shuffle_400.font.js”后,就可以通过如下代码所示的形式将其引入到页面中:

<scripttype="text/javascript"src="js/Denne_Shuffle_400.font.js"></script>

步骤三:应用Cufon渲染

在完成了上述的两项准备工作后,使用Cufon类库来实现对字体的渲染是非常简单的,这仅仅牵涉到了Cufon类库所提供的一个核心方法,即Cufon.replace方法,如下代码所示:

<h1>Takemetoyourheart</h1>

<scripttype="text/javascript">

Cufon.replace("h1");

Cufon.set("fontSize","66px");

Cufon.set("color","red");

</script>

而与此同时,为了可以更为精确的控制在进行字体渲染时所使用的字体风格,Cufon还提供了“配置项(Option)”这一概念,来帮助开发者直接在Cufon方法中指定相应字体风格值,上述代码后面两项配置了字体大小为66像素,颜色是红色,更多设置可见Cufon的官方文档。

示例的完整代码如下:

<!DOCTYPEhtml>

<head>

<metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/>

<title>Cufon</title>

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

<scripttype="text/javascript"src="js/Denne_Shuffle_400.font.js"></script>

</head>

<h1>Takemetoyourheart</h1>

<scripttype="text/javascript">

Cufon.replace("h1");

Cufon.set("fontSize","66px");

Cufon.set("color","red");

</script>

<body>

</body>

</html>

相关推荐