如何用CuFon表的方式调整CSS

什么是CuFon表？

CuFon是一种可以替换HTML文本的免费JavaScript库。它使用SVG和VML技术在Canvas元素上渲染文本。CuFon带来的好处是允许使用图像字体，这是一种允许您通过在Calligraphic和Chancery字体层添加效果、阴影和渐变来增强文字的方式。

除此之外，CuFon在渲染文本时使用JavaScript，就意味着可以让您玩转CSS。

如何开始利用CuFon调整CSS？

让我们从基础开始。最重要的是要在网站中优雅地使用CSS。其中一项最好的方法是统一字体。它可以帮助网站看起来更整洁，更专业。

一旦您确定您要使用的字体，下一步就是在CSS中设置它。但是，如果您正在寻找一种更有趣的方式来调整CSS，CuFon将是您的绝佳选择。

编写CSS样式

首先，我们将编写CSS规则，这样我们便可以控制我们的内容中的字体。简单起见，我们将使用下面这个简单的规则：

body {

  font-family: 'Tahoma', sans-serif;
  font-size: 16px;
  color: #333;
}

这里我们简单地设置了文本主题的字体、大小和颜色。

引入CuFon.js文件

您需要下载最新版本的CuFon。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>

<script type="text/javascript" src="path/to/cufon.js"></script>

载入Web字体

下一步是载入我们的Web字体。这包含两个步骤：首先，您需要转换字体文件到CuFon.js格式，然后插入JavaScript代码到您的站点。您可以使用CuFon官网上的在线转换器。

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

现在，我们就已经准备好将我们的Web字体绑定到文本元素。

绑定Web字体

下面的代码片段是将Web字体绑定到"h3"元素中的文本。

Cufon.replace('h3',{fontFamily: 'avenirBook_400', hover:true});

这里"Cufon.replace"命令将字体的名称带入，并将它绑定到指定的标记。"hover:true"属性允许我们为元素添加鼠标样式。

开始CuFon表的样式调整

现在，我们开始使我们的文本看起来更好看一些。想要更改CuFon表样式的最简单方法就是使用.config函数。它可以让我们改变文本元素的位置、颜色、大小和字体。

Cufon.replace('h3', {

  fontFamily: 'avenirBook_400',
  hover:true
}).config({
  color: '#E0160B',
  textShadow: '1px 1px #fff',
  textTransform: 'uppercase',
  letterSpacing: '-1px'
})；

我们在.config函数中加入了以下内容:

color: 所有文本的颜色改为"#E0160B"

textShadow: `<1px 1px #fff"`层叠阴影让文本看起来更加浮动

textTransform:将所有的文本转为大写字母

letterSpacing对元素文本域字母进行调整

总结

CuFon是一个出色的JavaScript库，可以让您玩转CSS。作为一种将字体变成图形的工具，它可以提供各种效果和的字体算法。无疑的，CuFon表是一个很好的工具，使我们可以轻松地调整CSS风格，并且可以让您轻松优化自己的网站模板。