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

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

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

定义及基本原理

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

简单范例

  步骤一:引入Cufon核心库

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

img_1984b7b7a8e89e8db1b0e7440d868a3a.png

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

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

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

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

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

img_c6db3bbf26d624285c8b2196fd8b32bf.png

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

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

  步骤三:应用Cufon渲染

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

<h1>Take me to your heart</h1>
<script type="text/javascript">
	Cufon.replace("h1");
	Cufon.set("fontSize","66px");
	Cufon.set("color","red");
</script>

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

  示例的完整代码如下:

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Cufon</title>
<script type="text/javascript" src="js/cufon-yui.js"></script>
<script type="text/javascript" src="js/Denne_Shuffle_400.font.js"></script>
</head>
<h1>Take me to your heart</h1>
<script type="text/javascript">
	Cufon.replace("h1");
	Cufon.set("fontSize","66px");
	Cufon.set("color","red");
</script>
<body>
</body>
</html>

  需要的朋友可以下载Demo,本示例最终效果如下:

  img_337d39f6e0671151d1f35d4a3cd50b47.jpg

优缺点及兼容性

  优点:

  1.比siFR技术简单100倍

  2.速度快,瞬间执行

  3.不依赖于服务器端语言

  缺点:

  1.依赖于JavaScript

  2.文本无法被选中

  3.无法实现悬停变换效果

  Cufon技术在主流浏览器中的兼容性情况如下表所示:

img_2dfc41f4fd8737802a9f242da2e54a2d.png 5+ img_4b705ca3dc641dc216935b700ae380ed.png 1.5+ img_e6430643296ff42e62129182cb11a6c8.png 1.0+ img_dae5f9be634eaa285210cff68e2c2309.png 3.0+ img_8c51a9e594305e45ca8c989b57d33ce6.png 9.5+

总结

  总的来说,这种实现自定义字体的方案还是比较简单的,虽然有些不足,但也是一种兼容性相对比较好的方案,个人觉得将来CSS3的@font-face更有可能成为实现网页自定义字体的主要方法。

参考文章:

  1.使用 Cufon 渲染网页字体 

  2.The Easiest Way to Use Any Font You Wish


相关文章:
相关文章
|
2天前
|
Java 测试技术 数据库连接
基于Java Web技术的跨平台应用开发策略探讨
基于Java Web技术的跨平台应用开发策略探讨
|
2天前
|
前端开发 JavaScript Java
利用Java Web技术实现实时通信系统的案例分析
利用Java Web技术实现实时通信系统的案例分析
|
2天前
|
IDE Java API
使用Java Web技术构建RESTful API的实践指南
使用Java Web技术构建RESTful API的实践指南
|
2天前
|
Java 应用服务中间件 API
深入解析Java Servlet技术在Web开发中的应用
深入解析Java Servlet技术在Web开发中的应用
|
3天前
|
安全 中间件 测试技术
Web3.0区块链技术开发方案:mint铭文铭刻制度开发
Web3.0区块链技术开发方案:mint铭文铭刻制度开发
|
6天前
|
前端开发 JavaScript Java
从前端到后端:构建现代化Web应用的技术演进
本文将讨论在构建现代化Web应用时涉及的技术演进,并重点关注前端和后端领域的发展。我们将探索各种编程语言(如Java、Python和C),数据库技术以及前沿的前端和后端框架,帮助读者了解如何利用这些工具和技术来构建高效、可扩展和用户友好的Web应用。
|
21天前
|
虚拟化 开发者 Docker
深入浅出:利用Docker容器化技术加速Web开发流程
在本篇文章中,我们将探讨Docker容器化技术如何为Web开发带来革命性的效率提升。通过具体案例和实操示范,我们不仅会介绍Docker的基本概念和工作原理,还将深入分析如何利用Docker容器化技术简化开发环境的搭建、提高应用的可移植性以及加快部署速度。本文旨在为读者提供一种全新的视角,理解并实践如何通过Docker优化现代Web开发流程,无论是对于个人开发者还是团队项目,都将带来前所未有的便捷和效率。
11 0
|
21天前
|
负载均衡 开发者 Docker
深入浅出:利用Docker容器化技术提升Web开发效率
在快速变化的软件开发领域,开发者面临着环境一致性和项目部署效率的双重挑战。Docker作为一种先进的容器化技术,为解决这些问题提供了优雅的解决方案。本文将探讨Docker的核心概念、优势以及如何在Web开发中应用Docker来提升开发和部署的效率。通过实际案例分析,读者将了解到如何构建、分享和运行Docker容器,以确保开发环境的一致性,并加速Web应用的交付过程。
|
21天前
|
存储 前端开发 安全
探索Web3.0时代的前端技术革新
本文着眼于Web3.0时代下前端技术的演进与挑战,旨在为开发者提供一个全面的视角来理解如何利用现代前端技术栈构建去中心化应用(DApps)。随着区块链技术、去中心化存储和智能合约的兴起,前端开发不再仅仅关注于传统的用户界面和用户体验设计,而是扩展到了如何与去中心化网络交互,以及如何保障数据的安全性和可访问性。本文将探讨相关的技术栈,包括但不限于Ethereum智能合约、IPFS去中心化存储解决方案以及Web3.js和Ethers.js等库的使用,旨在为前端开发者铺设一条通往Web3.0世界的桥梁。
12 0
|
22天前
|
缓存 负载均衡 应用服务中间件
构建高性能的Python Web应用程序的关键技术
本文将探讨构建高性能的Python Web应用程序的关键技术。我们将介绍Python的优势以及如何利用一些重要的技术和工具来提升Web应用程序的性能和效率,包括异步编程、缓存策略、性能调优和负载均衡等。

相关产品

  • 云迁移中心