使用Cufón替换字体

We all know about the big font replacement methods. sIFR's big. Image font replacement has gained some steam. Not too many people know about a great project named Cufón though. Cufón uses a unique blend of a proprietary font generator tool and JavaScript to create a custom font renderer in canvas and VML. Here's how to use Cufón to render the Sin City font for your headers.

我们都知道大字体替换方法。 sIFR很大。 图像字体替换已获得一定动力。 但是，没有多少人知道一个名为Cufón的伟大项目 。 Cufón使用专有字体生成器工具和JavaScript的独特结合在画布和VML中创建自定义字体渲染器。 这是使用Cufón渲染标题的罪恶之城字体的方法。

View Demo 观看演示

步骤1：生成字体 (Step 1: Generate the Font)

The first step is to use the Cufón font-generator tool to convert and customize the way the font renders. I was very impressed with the number of options available for the font conversion. Once the conversion is done, Cufón's generate presents you with a JavaScript file containing the font information as Cufón can read it.

第一步是使用Cufón字体生成器工具转换和自定义字体呈现的方式。 字体转换可用的选项数量给我留下了深刻的印象。 转换完成后，Cufón的generate将为您提供一个JavaScript文件，其中包含Cufón可以读取的字体信息。

步骤2：包括Cufón和字体 (Step 2: Include Cufón and the Font)

Include the Cufón JavaScript file and the generated font's JavaScript file.

包括CufónJavaScript文件和生成的字体JavaScript文件。

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

步骤3：选择器和元素 (Step 3: Selectors and Elements)

Time to select the elements to Cufón-ize. I don't recommend using Cufón for every bit of language on the page -- doing so can be resource-intensive. Generally you want to use custom fonts in headings so that's what I've chosen to do below.

是时候选择要自定义尺寸的元素了。 我不建议对页面上的所有语言都使用Cufón-这样做会占用大量资源。 通常，您希望在标题中使用自定义字体，因此我在下面选择了这样做。

Cufon.replace('#cufon-area h1, #cufon-area h2, #cufon-area h3');

View Demo 观看演示

In my experience, Cufón looks better than both sIFR and image methods. Be sure to check out Cufón as it's an outstanding tool and I look forward to seeing where the project goes. What are your thoughts?

以我的经验，Cufón看起来比sIFR和图像方法都好。 一定要检查Cufón，因为它是出色的工具，我期待看到项目的进展。 你觉得呢？你有没有什么想法？

Gentlemen...you're welcome for the gratuitous Jessica Alba image.

先生们...欢迎您获得免费的Jessica Alba图片。

翻译自: https://davidwalsh.name/cufon