Cufon中文字符无法识别的解决方案

2011 年 5 月 1 日

Cufon官方并不支持中文，所以很多收费主题里带了Cufon字体，写了中文就不识别了google一番，发现很多人遇到同样的问题，归纳了一下解决方法，大致有如下几种。

Sola提示：

如果你的本来打算是去掉Cufon，可以看一看《如何禁用Cufon功能》。

方案一

方法一，使用中文字体的js文件，目前有一个做好的，是微软雅黑字体，中英文都支持的，只要使用这个字体就可以万无一失了，缺点是只有一种字体，不支持粗体、斜体等样式，看着比较单调。

使用时如下设置即可

Cufon.replace ('#id', {fontFamily: 'Microsoft YaHei'});

或者

Cufon.set('fontFamily', 'Microsoft YaHei');

Cufon.replace ('#id',{…});

微软雅黑字体下载

下载地址1(需登录本站)：[download id=”9″]

下载地址2(站外下载)：Microsoft Yahei

方案二

方法二，使用自助生成平台生成自己需要的中文字体，地址是http://www.cufon-font.com/generate/font_choice.php

单击选择一种字体，点击rendering it即可查看渲染后的字体效果，点击Get Cufon Js获得该字体的js代码，保存成js文件引用即可。注意，你的渲染结果里看到多少字符，你就能使用多少字符，里面没有的你是用不了的。对于英文，只需要26个英文字母和一些常用符号即可，字体文件体积比较小。中文则非常不同，你需要使用哪个汉字，就要将这个汉子的代码添加进去，如果将全部常用字加进去，代码体积会很大，例如方法一中的文件就有1m多。

为了缩小体积，你可以仅仅生成你需要的汉子的代码，方法是在网页底下的“Input your letter for rendering”中填上你要渲染的汉字，选择一种字体，然后点击“Do it”按钮，就可以看到渲染结果，点击Get Cufon Js按钮获得js代码。

如果不知道该字体的名字，可以到你生成的字体文件中找Cufon.registerFont字样，在后面的大括号中"font-family"后面的就是字体的名称。

Cufon是一种很好的网页字体解决方案，希望能尽快找到一种中文字体替代的好方案

2011-09-30更新

用方法二做了其他的几款中文cufon字体，和大家分享下，包括常用的汉字和次常用的汉字，感觉字体生成的文件过大已经不适合网络应用了。

方正剪纸体下载：[download id=”11″]

楷体下载：[download id=”12″]

微软正黑下载：[download id=”13″]

行楷下载：[download id=”14″]

张海山锐线体-简下载：[download id=”15″]

效果如下图所示

更正 – 2011年11月7日

多谢morlin2011的提醒，自己做的cufon中文字体包不支持中英文混排，检查了一下，发现做字体包的时候忘了把空格加进去，不过这只会影响英文的word-spacing属性，对中文没影响。而中文字符重叠，据我猜测是因为生成字体的引擎默认按照英文来的，所以宽度窄了点，通过修改生成的js文件可以解决这个问题，如果简单的用letter-spacing就会使英文字符的间距也变大，而word-spacing属性对中文不好使，不能解决中文重叠问题。

重新编辑了一下字体js文件，适合中英文混排的字体打包和大家分享一下，字体包括：张海山锐线体-简、微软雅黑、楷体和方正剪纸体。

支持中英文混排三种字体打包下载

Note:文件仅供有兴趣的朋友研究，实际应用中请选择自己需要的文字做成字体包并启用gzip压缩，否则生成的文件过大，很占网速的。

网盘下载：支持中英文混排的cufon js文件下载

站内下载（需登录本站）

[download id=”17″]

下载后运行demo.html即可看到下图效果

效果如下图所示:

如何调整中文字间距

如何加大字体间距：

打开字体js文件，在开头可以找到如下代码：

Cufon.registerFont({"w":329,"face":…

修改“w”后面的数值（此处为329）即可改变字体间距。

如何修改空格的宽度：

如果对空格宽度不满意，也可以通过修改源文件改变空格的宽度，搜索如下代码：

"glyphs":{" ":{"w":87},

"w":87这个就是定义空格宽度的，修改这个数值直到自己满意为止。

如何手动向cufon的js文件里添加文字

如果把汉字写全了文件很大，所以最好只选择对自己有用的，如果想向已经生成的文件添加汉字或者符号，可以到http://www.cufon-font.com/generate/font_choice.php生成这个文字的代码，然后把这段代码拷贝的字体js文件即可，例如

添加符号“#”，生成的代码如下

"#":{"d":"19,-135r0,-23r52,0r14,-64r22,0r-13,64r64,0r13,-64r23,0r-13,64r30,0r0,23r-35,0r-11,56r46,0r0,23r-51,0r-13,63r-24,0r14,-63r-64,0r-14,63r-23,0r14,-63r-31,0r0,-23r36,0r11,-56r-47,0xm153,-135r-64,0r-12,56r65,0","w":218}

cufon的格式是

glyphs":{"符号 ":{属性},"符号 ":{属性},…

直接把这段代码找个地方插进去就可以了

支持中英文混排2种字体打包下载

话说剩下两个搞定了

文件下载：

Note:文件仅供有兴趣的朋友研究，实际应用中请选择自己需要的文字做成字体包并启用gzip压缩，否则生成的文件过大，很占网速的。

网盘下载：支持中英文混排的cufon js(华文行楷，微软正黑)

站内下载（需登录本站）

[download id=”18″]

效果图如下所示：

在线实例

CAUTION

谨慎使用！第一这些只是测试文件，第二要知道这些字体文件是非常大的，如果你的用户网速很有限，建议不要使用。

想测试加载速度可以点击在线实例。

Use it wisely!

115条评论

blessings说道：
2012 年 2 月 21 日 21:06
= =，抱歉，问个很白痴的问题，把那个JS文件上传到服务器之后，然后怎么用呢..今天刚安装 WordPress学习，下了个英文模板，发现汉化模板后不显示汉字…
1. ~SolagirL~说道：
  2012 年 2 月 22 日 09:17
  你都找找你的模板是在哪里引入了cufon，在哪里初始化字体的
  有的是在header里引入cufon-yui.js,有的在functions.php里
  你需要找到这个脚本在哪里引入的，然后在此脚本后引入你的中文字体js文件
  再找到调用的代码Cufon.replace…
  把字体名称换成你的中文字体就行了
  如果不想用cufon，把调用代码删除就是了
  也可以去掉cufon换用网络字体，例如google 字体或者@font face之类的，这些只会渲染英文，对中文没影响，可选的英文字体样式也很多
  1. 以青空为名说道：
    2012 年 2 月 22 日 10:25
    啊，~感谢ing..~~下午试试
vince说道：
2012 年 2 月 14 日 23:47
可以用吗？
1. ~SolagirL~说道：
  2012 年 2 月 15 日 09:35
  中文字体cufon文件体积稍大，能不能用要根据你服务器和用户群的实际情况来定
烁今说道：
2012 年 2 月 10 日 14:01
十分感谢博主，我的站终于成功显示中文字体了！
苏洋说道：
2012 年 2 月 2 日 00:47
动态生成中文cfon缓存起来就行了，但是字库要使用组合字体，大小无所谓，缓存的文件都不会太大的。
chengzi说道：
2012 年 1 月 23 日 20:12
kankan,很不错，正需要
ManGit说道：
2011 年 12 月 28 日 12:15
很好，解决了字符间距问题了，转到自己的Blog上，不介意吧？
1. ~SolagirL~说道：
  2011 年 12 月 28 日 12:23
  当然不介意，你转了还告诉我一声，我很欣慰了，谢谢
Pingback： Cufon 字体间距/空格宽度/添加文字 « LiangWenjie Blog
syf说道：
2011 年 11 月 26 日 11:46
怒赞
morlin2001说道：
2011 年 11 月 9 日 01:33
恩~剛剛發現Cufon離線安裝版有個特異功能~
把安裝好的文件夾搬移到自己的網站下，
就可以變成自己的Cufon線上版…..
就是跟下面連結一樣的東西:
http://cufon.shoqolate.com/generate/
但是選項有幾個地方不太一樣….
然後上傳任何ttf檔案都可以….(大小好像沒限制。)
我有上傳微軟正黑體去轉看看，有回給我一個18M的js檔~
可能被砍掉很多字符了吧…測都不想測就直接刪了js~
這幾天這樣玩cufon下來的心得，Cufon的中文js只適合用在網站的導覽按鈕上，自己弄個字庫加些會用到的中文字，與英文js的大小沒啥差別~但是如果想包很多常用字進去的話…..很考驗網路頻寬還有電腦效能!
對了~站長您包的字體包，微軟正黑體裡面沒有包到©這類符號的樣子。其他的字體我就沒看了!
想必您是從font_choice.php來創建的~
不知道您有注意到送字進去轉的時候，上面出現的missing字符列表嗎?
這類的特殊字元，font_choice.php好像不接受~
這也就是我跑去玩離線版的原因。
有心得問題再來一起討論吧?^^
1. sola说道：
  2011 年 11 月 9 日 11:35
  You are brilliant！这几天没有时间研究Cufon，我是用font_choice.php做的，没有加©特殊符号，汉字是在网上找的常用字，所以可能不全。我也认为cufon中文只适合选自己需要的加到js里使用，如果把汉字加全了那文件肯定不适合网络应用了。我一般只把cufon用到标题上，整站都用的话开销太大。
  如果有专门针对中文的算法就好了，根据中文特点做一个体积小的js，哈哈。
  这个东西很有用，我也想玩玩，苦于现在没时间弄，如果有什么心得一定分享一下哦！
qi2p说道：
2011 年 11 月 8 日 12:01
太感谢了，字体重叠困扰了我好久，谢谢！
1. ~SolagirL~说道：
  2011 年 11 月 8 日 12:03
  不客气，很高兴对你有帮助
morlin2001说道：
2011 年 11 月 7 日 20:44
我有用High-Logic FontCreator…
結論是:太複雜了!
最大的致命傷:沒辦法軟體內直接搜尋中文字符，
還必須先去找到那個字符的UNICODE碼，然後才能在
軟體內搜尋到那個中文字符….
幾萬個中文字符…..光找字就先死人了!
1. ~SolagirL~说道：
  2011 年 11 月 8 日 12:03
  High-Logic FontCreator，这个我记下了，谢谢！一直想知道字体是怎么做出来的
morlin2001说道：
2011 年 11 月 7 日 20:22
我用的是Git版~
直接抓下來的，還要安裝FontForge
https://github.com/sorccu/cufon/wiki/faq#wiki-faq-6
不太可能丟一個完整的中文TTF直接轉成js啊~頻寬會死人的!
所以要編輯一個自己的TTF字庫。
譬如2500常用字集，有點勉強了。
3500我覺得還是太大~太吃頻寬~
1. ~SolagirL~说道：
  2011 年 11 月 7 日 20:31
  你太厉害了，追根究底的研究。我以为本地运行就不怕字多，看来这是个美好的愿望啊。你知道怎么编辑TTF字库吗？我觉得一部分一部分的转换，然后合并js文件也是个方法。不过话说2500个汉字生成的js文件也相当大了，碰上网速慢的受得了么。
morlin2001说道：
2011 年 11 月 7 日 19:18
剛在我的LINUX上裝了CUFON 離線版~
還真的可以把ttf直接轉js了….
可是那個ttf要怎麼搞啊?
LOL
1. ~SolagirL~说道：
  2011 年 11 月 7 日 19:54
  CUFON离线版，听起来不错，你在哪里下的？
2. ~SolagirL~说道：
  2011 年 11 月 7 日 20:03
  你是在这里（https://github.com/sorccu/cufon）下载源代码编译的吗，看起来很有趣，等我有空在虚拟机上装linux试试，你说什么ttf搞不定？
morlin2001说道：
2011 年 11 月 7 日 16:15
用GoogleChrome會快很多。
但是後續的編輯&轉存txt，整個大LAG~
後來我就用Acrobat先存成PDF在慢慢轉存txt，
會比較順暢些。
1. ~SolagirL~说道：
  2011 年 11 月 7 日 19:55
  谷歌浏览器确实快一些，你也挺能捣鼓的，哈哈
morlin2001说道：
2011 年 11 月 7 日 02:37
(http://cufon.shoqolate.com/generate/)
這裡我一樣沒法上傳中文字體~可以傳完但不給生成。
參數指的是從
http://www.cufon-font.com/generate/font_choice.php
搞出來的js裡的控制數值。
我有試著手動添加3500個常用字體….
我的Firefox接近崩潰邊緣，當然也沒成功 TT
1. ~SolagirL~说道：
  2011 年 11 月 7 日 10:07
  我的firefox装东西多貌似比别的浏览器更容易崩溃，我也是用这个做的，添加了3499个汉字，有那么一两次崩溃了，多试了几次还是可以转的。不过我昨天发现居然把“嘻”字落下了，还好不用重新生成文件，只要生成“嘻”字的代码，然后插入到js文件里就能用。
morlin2001说道：
2011 年 11 月 7 日 02:12
恩~看來是Cufon 的產生字體網站有點問題了!
我是找不到根源直接去問模板作者，
他又丟http://www.tingcheba.com/cufon-chinese 給我
要我試試加上separate:’characters’。
那網站我昨晚就試過了~沒用!然後突然看到裡頭有”正常”的FONT FILE!
那就來實驗比對看看吧~賓果!
原來問題出在FONT FILE裡的參數~
晚上可以睡好了!
也感謝你的幫忙。
1. ~SolagirL~说道：
  2011 年 11 月 7 日 02:29
  你说的FONT FILE参数是指的cufon官网的生成器吗(http://cufon.shoqolate.com/generate/)
  我的字体文件是用http://www.cufon-font.com/generate/font_choice.php生成的，以前试过用官网，但对文件大小有限制，中文字体包太大了，上传不了。
  我做的字体包汉字可能不全，第一次做没经验，不知道还有啥问题呢
morlin2001说道：
2011 年 11 月 7 日 01:56
Cool! 您真厲害!我才剛找出u的替換~
您就發現空格問題
哈哈
1. ~SolagirL~说道：
  2011 年 11 月 7 日 02:00
  空格问题是我一开始发现的呵呵，u这个是我折腾空格的时候偶然发现，貌似折腾一通知道cufon 的js结构具体啥样了
morlin2001说道：
2011 年 11 月 7 日 01:38
英文字母u（xiaoxie）间距变大了
我這裡也是>
1. ~SolagirL~说道：
  2011 年 11 月 7 日 01:41
  是的，我当时试验了这个，别的都没问题，就是字母u不对，所以这个字体就没搞定，除了这个字体和华文行楷，别的我都搞定了
  我尝试给字母u加了宽度，似乎能修正
2. ~SolagirL~说道：
  2011 年 11 月 7 日 01:45
  貌似加宽度可以，
  “u”:{“d”:”105,-20v71,-2,50,-103,53,-174r29,0r0,194r-29,0v-1,-10,2,-23,-1,-31v-32,62,-129,43,-129,-47r0,-116r29,0v4,66,-20,176,48,174″}
  替换成
  “u”:{“d”:”105,-20v71,-2,50,-103,53,-174r29,0r0,194r-29,0v-1,-10,2,-23,-1,-31v-32,62,-129,43,-129,-47r0,-116r29,0v4,66,-20,176,48,174″,”w”:190}
  不知道还会不会有其它问题，继续测试
3. ~SolagirL~说道：
  2011 年 11 月 7 日 01:55
  还有，我做的字体包里少了空格，所以如果你输入cufon test之类带空格的英文，就会变成cufontest，需要把空格补上，还好可以直接在代码里加
  在”glyphs”:{ 后面加上这句就行
  ” “:{“w”:106},
  106是空格的宽度，可以根据自己需要调整
4. ~SolagirL~说道：
  2011 年 11 月 7 日 01:58
  不知道咋回事双引号都变成中文的了。。。
morlin2001说道：
2011 年 11 月 7 日 01:36
bbox为-36 -307 362 92
我剛剛貼錯啦~真是抱歉
morlin2001说道：
2011 年 11 月 7 日 01:35
剛剛又測試了一下==”有去加字~
最好是”glyphs”前面的全部替換，除了
“Font-family”
&
“unicode-range”
1. Sola说道：
  2012 年 6 月 22 日 16:13
  Hi，真是好久不见，你一评论我就发现嵌套评论的缺点了，找不到回复按钮了，哈哈，看来得整个@通知的功能。
  Cufon似乎是解决中文字体的方法，英文的话，感觉cufon要死了，现在很多收费字体已经宣布支持@fontface，感觉@fontface已经取代了cufon。
  我现在用cufon非常少了，哈哈，你的离线版很牛，确实比在线版好很多，可是我还没安装~~囧
  每次都说等有时间了，结果时间都不知道哪里去了，你分享个教程啥的，我来个快速安装
  1. morlin2001说道：
    2012 年 6 月 22 日 17:15
    這個….回覆位置跳來跳去是怎麼回事?暈倒…
    1. Sola说道：
      2012 年 6 月 22 日 17:21
      评论太多没开分页的结果吧，呵呵，我别的文章评论都不多，所以不想开分页，这篇文章的评论看着眼花缭乱了，改天我处理一下
    2. Sola说道：
      2012 年 6 月 22 日 17:24
      嵌套评论就这点不好，嵌套到最后一层的时候想点回复，很郁闷的
morlin2001说道：
2011 年 11 月 7 日 01:13
我想應該找到問題點了….
無意間看到 http://www.tingcheba.com/cufon-chinese
裡面有個Microsoft YaHei 文件，測試後沒字距問題。
索性就把自己從CUFON產生的字型檔(微軟正黑體)裡面”glyphs”之前的，全替換成Microsoft YaHei里的參數(更換字型名稱)。
居然就正常了~之後一個一個參數替換看看…..
結論就是把BBOX的參數改成
“bbox”:”-38 -307 356 92.0766″
就OK正常嚕~
1. ~SolagirL~说道：
  2011 年 11 月 7 日 01:17
  微软雅黑那个确实没问题，我的微软雅黑下载也是在网上找到的，这个不知道是很么人做的，不过用http://www.cufon-font.com/generate/font_choice.php生成的cufon字体就会有重叠的问题，不知道那个微软雅黑是不是处理过
2. ~SolagirL~说道：
  2011 年 11 月 7 日 01:33
  试验了一下只替换bbox为-36 -307 362 92，似乎没有效果，我想不是bbox的问题，而是微软雅黑的开头是Cufon.registerFont({“w”:209
  而正黑的开头是Cufon.registerFont({“w”:360
  由于宽度从209变成了360，所以中文字符不重叠了，但是我测试的时候发现英文字母u（xiaoxie）间距变大了，不知道是什么问题
阿西说道：
2011 年 11 月 6 日 20:44
不错，好东西呀
morlin2001说道：
2011 年 11 月 6 日 20:27
感謝回覆~
這個方式是可以把中文字距調開了，但是英數字距卻變大了。
表示無法中英混用了==” Orz
1. ~SolagirL~说道：
  2011 年 11 月 7 日 01:08
  感谢你的回复，原来没有意识到中英文混用的问题，这一看发现了不少事。总之，我做了能中英文混排的，不过有两种字体没搞定，搞定的我发上来了，如果感兴趣可以看看我今天的更新。
  这次的字体包不会重叠，不需要letter-spacing。
morlin2001说道：
2011 年 11 月 6 日 06:08
我也是遇到中文字都疊在一起的問題了，可以詳述一下解決方式嗎?感謝!
1. morlin2001说道：
  2011 年 11 月 6 日 12:39
  找到解決方式了~
  Cufon.replace(‘h1′) 改为 Cufon.replace(‘h1′,{separate:’characters’}) 就行了。
  也就是加上{separate:’characters’}
  就完全正常了>
  1. morlin2001说道：
    2011 年 11 月 6 日 12:45
    ==” 以上好像沒用請刪除!
2. ~SolagirL~说道：
  2011 年 11 月 6 日 19:09
  假设给h1应用cufon字体，添加如下样式
  h1 {letter-spacing:10px}
  letter-spacing定义字符间距，如果字符重叠，就将这个间距加大，在写样式的时候注意一下css的继承和优先级，保证这个样式不被覆盖即可
tsolution说道：
2011 年 11 月 5 日 11:30
中文字体都挤到一块了。是怎么回事啊。。
1. ~SolagirL~说道：
  2011 年 11 月 5 日 11:32
  css问题，中文cufon字符需要的间距比英文的大，所以你需要用firebug找到定义字符间距的样式，然后加大margin
老衲说道：
2011 年 10 月 4 日 21:03
那我的一个主题去掉了cufon.js后，幻灯片不能用了，这个有关系不
1. ~SolagirL~说道：
  2011 年 10 月 4 日 22:04
  如果只去掉了cufon.js，而没有去掉调用cufon的代码，那会产生js错误，可能导致幻灯片的js无法运行
vino说道：
2011 年 8 月 12 日 10:57
唉实在不行我就取消这个CUFON。本来觉得挺好的但是是英文效果
1. ~SolagirL~说道：
  2011 年 8 月 12 日 14:03
  cufon可以识别中文吧，而且有自己做中文字体的平台，以后使用cufon应该是主流
Kvn.kuang说道：
2011 年 7 月 9 日 09:07
很管用，谢谢！终于主题可以使用了！
1. ~SolagirL~说道：
  2011 年 7 月 9 日 13:14
  多谢告知:)
jellyfish2说道：
2011 年 6 月 28 日 15:16
幻灯片和中文的完美问题解决了!!!
太爱你了
1. ~SolagirL~说道：
  2011 年 6 月 29 日 03:04
  很高兴对你有帮助！
罗宗保！说道：
2011 年 6 月 3 日 06:37
You are my life savior! 我找了半天真的“半天” 也没找到！现在我会把我的网站弄漂亮了！
谢谢！
1. ~SolagirL~说道：
  2011 年 6 月 26 日 01:45
  很高兴你喜欢，我的辛苦没白费，谢谢关注

评论已关闭。