Categories

如何使用Cufon生成的字体(高级)

Norman Fisher November 21, 2011
Rating: 5.0/5. From 2 votes.
Please wait...

本教程将向您展示如何向使用cufon构建的现有文本添加特殊字符或将其更改为不同的cufon生成字体.

Cufon is an online font generator,它可以将计算机中的任何字体转换为特定的Java script. 之后,为了将字体嵌入到 web page, you just need to load it with thescript tag. Prior to font transformation, 您可以对一些字体特性进行操作, 例如包含的字符集或字形, 为了优化特定web应用程序的字体. And also it is SEO friendly.

If your template comes with cufon, 你要用一个不同的或者添加一些特殊的字符来替换它:

1.First off all, you need to find out what font is used for the particular text.

Go to the sources(+symbols)/psd folder in your template package. Open the .psd file 它表示包含要在其中进行更改的字体的页面 Adobe Photoshop. Selectthe “Type” tool from the “Tools” 调色板,单击文本或突出显示文本. Select the font from the “Set the Font Family drop-down box.

(Photoshop选项栏中的字体系列下拉选择框)

2. Secondly, you need to check if this font supports 用于模板的语言的特殊字符, 如果你想添加任何特殊的符号.

If you are on a PC, you can use Font Runner. 这是一个免费的Windows字体管理器,你可以用它来管理你的字体文件,把它们保存在你选择的文件夹里. 它还可以让你检查你的字体,并通过浏览它的 supported characters.

Once you have installed Font Runner,打开它并导航到计算机上的字体文件夹(i.e. C:\Windows\Fonts)从左侧菜单.

在右侧面板中,通过键入字体名称找到您的字体. 确保高亮显示,然后将模式更改为 “Font Map”.

Note, if you do not see the special characters of your language in the “Font Map” table, they are not supported by the current font, and you should choose a different one that does. 要查找最接近的匹配项,可以使用 WhatThe Font online service.

3. Now you need to generate your own font’s .通过将字体文件上传到 http://cufon.shoqolate.com/generate/. In order to do this,

  • 将你想要使用的字体文件从你的“字体”文件夹复制到你的桌面或任何其他 directory 这将允许您轻松访问字体 . 这将是模板中使用的相同字体, 如果您确定它将支持您的语言中的特殊字符(如上所示)或支持这些字符的完全不同的字体;
  • at http://cufon.shoqolate.com/generate/ 选择您想要使用的字体(仅限当前).ttf(TrueType); otf(OpenType); PFB 支持(打印机字体二进制)格式) saved on your desktop using the “Regular Typeface” field or bold, italic and bold italic variations. Be sure to click the EULA box to confirm they allow web embedding
  • 包括以下符号(如果可用) 一组选项允许我们选择适当的符号组来附加在字体文件中. 必须记住,每增加一组符号都会扩大字体文件的大小. Thus, 你必须尽量限制字体文件中的符号数量,以免减慢网站的加载速度. It normally is enough to have the Basic Latin option checked. The rest is up to you.

*To determine, if you need to check Latin-1 Supplement, Latin Extended-A,etc, you need to go to http://jrgraphix.net/r/Unicode. On this web page 你可以通过点击它来查看与这些类别相关的符号.

In the …and also these single characters 在一行中输入您的自定义语言字符(小写和大写),如下所示:aistaAISTA

  • 你可以跳过剩下的选项.The default settings are the most recommended.
  • Terms: 您应该通过勾选适用框来同意这些条款. Then click the “Lets do this!” button.

4. Save the generated .js file into the “js” 站点文件夹(如果您在本地工作)或桌面上的文件夹,以便稍后将其上传到服务器.

5. 如果您使用Cufon生成器在现有字体中嵌入了一些特殊字符,
all you need to do is to replace the existing .jscufon file located in the “js” folder with the new generated one. 在本例中,两个文件应该具有相同的名称,因此它将 ask you to confirm the replacement 将文件移动到" js "文件夹时. 确认更换,就这样.

If you have generated a different cufon 字体,并想替换现有的字体,请按照下面的步骤操作.

6. Copy the name of your generated .js file (hit F2, then Ctrl + C)

7. Open the index.php or index.html 文件(取决于模板类型)在文本中 editor 或者在Dreamweaver中查找您想要替换的字体名称(参见本教程的第1步), 如果你需要知道名字)用Ctrl(Command) + F. It should look like

and replace the font_name with the name of your generated .js file (Step 6). Then save the changes.

8. Open your generated .js file a file and copy the font-family name where it says

  font-family:font  family name

9. Open the cufon-replace.js in the “js” folder of your template and replace the font-family name of the existing font with the font-family name生成的字体并保存更改.

10. Open your website in a web browser 检查字体是否已被替换. Fit F5 to clear the caches, if needed.

欲了解更多信息,请查看下面的视频教程

如何改变谷歌地图的位置在WordPress

Wordpress Premium Themes
This entry was posted in Working with fonts and tagged character, Cufon, font, script, specia, text. Bookmark the permalink.

Submit a ticket

如果您仍然无法找到关于您的问题的足够的教程,请使用以下链接向我们的技术支持团队提交请求. 我们将在接下来的24小时内为您提供我们的帮助和协助: Submit a ticket