使用Cufón替换字体

系统管理员 2023-02-21 15:26 20阅读 0赞

![Sin City][]

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][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][great project named Cuf_n]的[伟大项目][great project named Cuf_n] 。 Cufón使用专有字体生成器工具和JavaScript的独特结合在画布和VML中创建自定义字体渲染器。 这是使用Cufón渲染标题的罪恶之城字体的方法。

[View Demo][] [观看演示][View Demo]

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

The first step is to [use the Cufón font-generator tool][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字体生成器工具][use the Cuf_n font-generator tool]转换和自定义字体呈现的方式。 字体转换可用的选项数量给我留下了深刻的印象。 转换完成后，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文件。

## 步骤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][] [观看演示][View Demo]

In my experience, Cufón looks better than both sIFR and image methods. Be sure to [check out Cufón][great project named 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，][great project named Cuf_n]因为它是出色的工具，我期待看到项目的进展。 你觉得呢？你有没有什么想法？

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

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

> 翻译自: [https://davidwalsh.name/cufon][https_davidwalsh.name_cufon]

[Sin City]: http://imgconvert.csdnimg.cn/aHR0cHM6Ly9kYXZpZHdhbHNoLm5hbWUvZGVtby9zaW4tY2l0eS5qcGc?x-oss-process=image/format,png
[great project named Cuf_n]: http://wiki.github.com/sorccu/cufon
[View Demo]: https://davidwalsh.name/demo/cufon.php
[use the Cuf_n font-generator tool]: http://cufon.shoqolate.com/generate/
[https_davidwalsh.name_cufon]: https://davidwalsh.name/cufon